I am currently in the process of setting up a basic WordPress blog with only one page dedicated to the blog archive. However, I have encountered an issue. I want to implement a toggle functionality that allows visitors to easily navigate through posts on the same page without having to reload the entire page or be directed to individual post pages. Although similar questions have been asked before, none of the examples provided seem to work for me. I simply want a show/hide feature that displays the excerpt by default and, when clicked, expands to show the complete content. When clicked again, it should revert back to the excerpt. Despite trying various solutions from Stack Overflow, nothing seems to be working so I decided to start fresh with my original files. Currently, the script is not functioning as expected in the loop-custom file despite my attempts.
Below is the JavaScript code I have implemented:
$(function () {
$('.mainContent').hide();
$('a.read').click(function () {
$(this).parent('.excerpt').slideUp('fast');
$(this).closest('.post').find('.mainContent').slideDown('fast');
// $('.mainContent').show();
return false;
});
$('a.read-less').click(function () {
$(this).parent('.mainContent').slideUp('fast');
$(this).closest('.post').find('.excerpt').slideDown('fast');
return false;
});
});
Here is the index file snippet:
<div id="content">
<div id="inner-content" class="row">
<main id="main" class="large-8 medium-8 columns" role="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!-- Additional archive styles can be found in the /parts directory -->
<?php get_template_part( 'parts/loop', 'custom' ); ?>
<?php endwhile; ?>
<?php joints_page_navi(); ?>
<?php else : ?>
<?php get_template_part( 'parts/content', 'missing' ); ?>
<?php endif; ?>
</main> <!-- end #main -->
<?php get_sidebar(); ?>
</div> <!-- end #inner-content -->
</div> <!-- end #content -->
Lastly, this is how the loop-custom file looks like:
<article class="post" id="post-<?php the_ID(); ?>" <?php post_class(''); ?> role="article">
<header class="article-header">
<?php get_template_part( 'parts/content', 'byline' ); ?>
<h2><?php the_title(); ?></h2>
</header> <!-- end article header -->
<section class="entry-content" itemprop="articleBody">
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail('full'); ?></a>
<?php the_excerpt('<button class="tiny">' . __( 'Show more...', 'jointswp' ) . '</button>'); ?>
</section> <!-- end article section -->