I have many snippets with a "read more" link, and
I'm looking for a way to have the same selectors for all the snippets. I
thought that jQuery's next could work:
<script>
$(document).ready(function () {
$(".readmore").click(function () {
$(".readmore").next().slideToggle("slow", function () {
$(window).scrollTop($(this).offset().top);
});
});
});
</script>
Visible text 1<a class="readmore">Read More 1</a><div class="more">Text to appear 1</div>
Visible text 2<a class="readmore">Read More 2</a><div class="more">Text to appear 2</div>
Visible text 3<a class="readmore">Read More 3</a><div class="more">Text to appear 3</div>
<style>.more {display:none}</style>
Unfortunately, text for all
snippets appears when clicking on one "read more" link, instead of
just the next element. What's wrong with the code above?
Anonymous User
24-Nov-2014You should change
$(".readmore").click(function () {$(".readmore").next()...
to
$(".readmore").click(function () {
$(this).next()...
so the next() selector in the click() event function is only applied to the currently clicked element instead of all elements with the class readmore at the same time.