HOW TO SLIDETOGGLE NEXT ELEMENT IN JQUERY?

Andrew Watson

Total Post:39

Points:273
Posted by  Andrew Watson
 973  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. Kamlakar Singh

    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.

Answer

NEWSLETTER

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