阅读更多按钮 jquery

Question

I have a full the content. When I click on the button, immediately all the blocks are shown completely, but I need to completely show only the block that I clicked on php

 <?php if ( $query->have_posts() ) : ?>
    <?php while ( $query->have_posts() ) : $query->the_post(); ?>
           <div class="content"><?php the_content(); ?></div>
           <button class="show-more">Show more</button>
    <?php endwhile; ?>

css

.content { max-height: 20px; overflow: hidden; }
.show-more { margin-top: 15px; }

jquery

jQuery(document).ready(function() {
    jQuery('.show-more').click(function() {
    jQuery('.content').css('max-height', 'none');
    jQuery(this).remove();
  });
});

Answer 1

When you target .content you are selecting all elements in that class. You may switch to ID selector or using.prev() to select only the previous element:

jQuery(this).prev(".content").css('max-height', 'none');

You should also remove overflow:hidden :

jQuery(this).prev(".content").css({'max-height':'none','overflow':'auto'});

Answer 2

Find the closest .content

Try this

jQuery(document).ready(function() {
    jQuery('.show-more').click(function() {
    jQuery(this).closest('.content').css({'max-height':'none','overflow':'auto'});
    jQuery(this).remove();
  });
});
``