how to expand post content and hide excerpt whenn click on read more button

user_10629322 0
Viewed 44

I want to change functionality of read more button in archive page and make it expand post content and hide excerpt whenn click on it I am using jquery to do this but when you click on button , all excerpts in page are hidden i need to hide the excerpt only in the article where the button is located any help to do this My code :

    <div class="page-content">
        <?php
        while ( have_posts() ) {

            the_post();
            $post_link = get_permalink();
            ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class();  ?>>
                <?php
                if ( has_post_thumbnail() ) :
                    the_post_thumbnail();
                endif;
                ?>
                <div class="article-content">
                    <header class="entry-header">
                    <h3 class="entry-title"><?php the_title(); ?></h3>
                    </header>
                    <div class="entry-excerpt">
                        <?php the_excerpt(); ?>
                    </div>
                    <div class="news-content"><?php the_content(); ?></div>
                    <div class="read-more-div"><a class="read-more-btn" href='javascript:read_fun()'> Read more + </a></div>
                    
                </div>  
            </article>
        <?php } ?>
    </div>

My Jquery code

jQuery(document).ready(function($) {
    $('.read-more-div').click(function() {
         var $toggle = $(this); 
        $('.entry-excerpt').hide();
        $('.news-content').show();
        $(this).remove();
    });
});
wordpress php jquery javascript
2 Answers

Your issue is tree navigation. Your hiding all $('.entry-excerpt').hide(); and showing all $('.news-content').show(); where you only want the siblings to .read-more-div that was clicked.

There are two ways to do this, you can navigate the tree based on the click event using .parent() and .sibling() selectors, or place the event on the handler.

// https://api.jquery.com/siblings/
$('.read-more-div').on('click', function() {
   var $this = $(this); 
   $this.siblings('.entry-excerpt').hide();
   $this.siblings('.news-content').show();
   $this.remove();
});

or using a delegate target method (listening on a parent)

$('.article-content').on('click', '.read-more-div', function(evt) {
    var $this= $(evt.delegateTarget); 
    $this.find('.entry-excerpt').hide();
    $this.find('.news-content').show();
    $this.find('.read-more-div').remove();
});
user_27897560

Sounds like your selector is not specific enough, and the click event listener is applying to all .read-more-div, .entry-excerpt, and .news-content elements on the page simultaneously instead of just the one within the clicked element as intended. Try looping through each element to assign the event listener so you can access each individual element:

jQuery(document).ready(function($) {

  // get parent element (containing both .read-more-div and elements to reveal/hide
  var articles = $('.article-content');

  // loop through articles to reference specific child elements
  for(var i=0; i<articles.length; i++) {

    // define child elements for easy reference (note that each is a jQuery element)
    var article = $( articles[i] );
    var readMoreDiv = $( article.find('.read-more-div') );
    var entryExcerpt = $( article.find('.entry-excerpt') );
    var newsContent = $( article.find('.news-content') );

    // apply click event to reference these specific elements
    readMoreDiv.click(function(){
      entryExcerpt.hide();
      newsContent.show();
      readMoreDiv.remove();
    })
  }
});
user_82736860
Related