Question

I have some problems and hoping you could help.

I have the following HTML code

<h4><a class="trigger">Click </a></h4>

<ul class="panel">
<li>List items bla bla bla </li>
<li>List items bla bla bla </li>
<li>List items bla bla bla </li>
</ul>

<h4><a class="trigger">Click </a></h4>

<ul class="panel">
<li>List items bla bla bla </li>
<li>List items bla bla bla </li>
<li>List items bla bla bla </li>
</ul>

And I would like that on click it toggles. I have the following code in jQuery:

$(function(){

    $('ul.panel').hide();
    $("a.trigger").click(function(){
        $("ul.panel").slideToggle("fast");
        $(this).toggleClass("active");
        return false;
    });
});

Now I know it won’t work because it’s selecting ALL items. How can I use it so it only toggles the actual trigger that was clicked and not toggle all of them? I have tried to use FIND, SIBLINGS, NEXT, etc but I can’t.

Any help, appreciated.

Thank you!!

Answer 1

$('a.trigger').click(function() {
    $(this).closest('h4').next('.panel').slideToggle();
});

Working example

The concept here is that you traverse the DOM to get to a common point where you can generalize your commands. In my example, I navigate outward to a common ancestor (h4) and then find the next list relative to that parent element. If you have a templated layout, this is a very common technique for DOM traversal.