Onclick Show Hidden Div, специфичный для выбранного листинга

Question

У меня есть список данных, которые собираются из базы данных.

Я добавил Div с меткой «Подробнее» и еще один div, который содержит контент и скрыт.

Когда пользователь нажимает на текст «читать больше», отображается содержимое div с отображением.

Вот мой текущий код ниже:

<script> 
    $(document).ready(function(){ 

     $(".readmore").click(function() { 
      $('.readmecontent').show(); 
     }); 
    }); 
</script> 

// HTML, .. Примечание: Контент будет добавлен с помощью PHP, но жёстко теперь ...

echo '<div class="readmore">Read more...</div>'; 
echo '<div class="readmecontent" style="display:none;">Read Me Content Here</div>'; 

Все вышеуказанные работы, но проблема в том, что класс «readmore» в настоящее время открывает все классы «readmecontent».

Мне нужно просто показать «readmecontent» DIV, который применяется к классу «readmore», который был нажат.

Я не могу использовать идентификаторы, потому что список создается динамически.

Как это сделать?

Answer 1

Используйте экземпляр this, чтобы найти следующий элемент:

$(this).next('.readmecontent').show(); 

Answer 2

это решение не нужно, чтобы держать Экземпляр

$(".readmore").click(function() { 
    $('.readmecontent:not(.readmecontent.visible)').eq(0).show().addClass('visible'); 
});