Question 2650 in Wordpress Question posted in
The official Wordpress documentation can be found here.

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

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

2

Answers


  1. 0

    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();
    })
  }
});
    Login or Signup to reply.
  2. 0

    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();
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search