CODEWITHSUNDEEP
javascriptphpjquerywordpress
Nikita Kurilovic
Nikita Kurilovic

Reputation: 383

Read more button with jquery

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

Upvotes: 1

Views: 529

Answers (2)

AKT
AKT

Reputation: 1071

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

Upvotes: 0

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11131

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

Upvotes: 1

Related Questions