How to Slidetoggle next element in jquery?

Total Post:39

 1417  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:

$(document).ready(function () {
    $(".readmore").click(function () {
        $(".readmore").next().slideToggle("slow", function () {
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

    Re: How to Slidetoggle next element in jquery?

    You should change

    $(".readmore").click(function () {
    $(".readmore").click(function () {

    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