4

i've been looking all over for a solution to this but i just can't figure out how.

what i want is for the specific header that was clicked to be the only one to expand.

demo is here: http://jsfiddle.net/bm92L0eg/1/

html:

<h3 class="click-list">header a</h3>
<ul class="open-list">
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

<h3 class="click-list">header b</h3>
<ul class="open-list">
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

<h3 class="click-list">header c</h3>
<ul class="open-list">
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>

jquery:

$('.click-list').click(function() {
    $(this).find('.open-list').slideToggle(600);
});

that jquery code didn't work while this code below is the one that acivates all headers:

$('.open-list').slideToggle(600);
rlxa
  • 49
  • 1
  • 5

1 Answers1

2

Use .next() to select the adjacent .open-list element.

It should be:

$('.click-list').click(function () {
    $(this).next('.open-list').slideToggle(600);
});

Updated Example

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • i see. i'm still somewhat new to jquery so it's quite hard for me to figure out how next & other stuff like bind works. thanks! =) – rlxa Feb 07 '15 at 00:55