How to Slidetoggle next element in jquery?

Total Post:39

Points:273
 1262  View(s)
Ratings:
Rate this:

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?

  1. Post:194

    Points:1396
    Re: How to Slidetoggle next element in jquery?

    You 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.

      Modified On Apr-07-2018 12:37:52 AM

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!