Home > DeveloperSection > Forums > How to Slidetoggle next element in jquery?
Andrew Watson
Andrew Watson

Total Post:39

Points:273
Posted on    November-23-2014 10:03 PM

 JQuery JavaScript 
Ratings:


 1 Reply(s)
 582  View(s)
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?



Kamlakar Singh
Kamlakar Singh

Total Post:194

Points:1396
Posted on    November-24-2014 12:06 AM

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.


Don't want to miss updates? Please click the below button!

Follow MindStick