Переключите the_excerpt и the_content в галерее в стиле каменной кладки

Question

Я пытаюсь переключаться между своими сообщениями the_excerpt и the_content в галерее в стиле кирпичной кладки, но это влияет на каждый отдельный пост, а не только на тот, на котором была нажата кнопка.

<div class="card-columns">
   <?php
$postCases = new WP_Query(array(
    'posts_per_page' => -1,
    'post_type' => 'cases',
    'orderby' => 'title',
    'order' => 'ASC'
));

    while ($postCases->have_posts()) {
    $postCases->the_post(); 
?>

   <div class="card">
      <img class="card-img-top" src="<?php the_post_thumbnail_url(); ?>">
      <div class="card-body">
         <h4 class="card-title section-subtitle text-center"><?php the_title(); ?></h4>
         <p class="card-text excerpt"><?php the_excerpt(); ?></p>
         <p class="text-center read more"><i class="fas fa-plus-circle"></i></p>
         <p class="case-content"><?php the_content(); ?></p>
     </div>
   </div>
<?php }
wp_reset_postdata();
?>
</div>

$(document).ready(function() {
  $(".read").click(function() {
    $('.case-content').slideToggle('slow');
  });
});

Всякий раз, когда .readщелкнул, он должен переключать the_content этого конкретного сообщения.Вместо этого он переключает все остальное содержимое.Как я могу это исправить?

Answer 1

Сначала скрыть содержимое.

<style>
.case-content{
    display:none;
}
</style>

Вы можете использовать далее fuction.При нажатии на кнопку «читать дальше» найдите ближайшего брата выбранного элемента с классом «case-content» и примените Toggle.

like.

 $(".read").on('click', function() {
    $(this).next('.case-content').slideToggle('slow');
  });