CODEWITHSUNDEEP
javascriptjquery
starsinmypockets
starsinmypockets

Reputation: 2294

Jquery: slideToggle() multiple divs independently using one function

Markup:

<div>
    <h3 class = "trigger">Heading 1</h3>
    <ul class = "toggle">
        <li>Line One</li>
        <li>Line Two</li>
        <li>Line Three</li>
    </ul>
</div>
<div>
    <h3 class = "trigger">Heading 2</h3>
    <ul class = "toggle">
        <li>Line One</li>
        <li>Line Two</li>
        <li>Line Three</li>
    </ul>
</div>

and the JQuery:

$(".toggle").slideUp();
$(".trigger").click(function(){
    $(".toggle").slideToggle("slow");
  });

I'd like to be able to toggle these <ul>s independently. Currently, when either <h3> title is clicked both divs toggle...

code is at: http://jsfiddle.net/CPvCZ/4/

Upvotes: 3

Views: 16419

Answers (1)

methodofaction
methodofaction

Reputation: 72385

The solution is quite simple:

$(".toggle").slideUp();
$(".trigger").click(function(){
    $(this).next(".toggle").slideToggle("slow");
  });

http://jsfiddle.net/CkTRa/

Upvotes: 8

Related Questions