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

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 >
        <?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 >
                    <header >
                    <h3 ><?php the_title(); ?></h3>
                    </header>
                    <div >
                        <?php the_excerpt(); ?>
                    </div>
                    <div ><?php the_content(); ?></div>
                    <div ><a  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();
    });
});

CodePudding user response：

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();
    })
  }
});

CodePudding user response：

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

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();
});