Question

Here is what I have

<div class='class1'>
   Some content
   <div class='trigger'>
     <a href='#'>Push To Start</a>
    </div>
</div>
<div ='toggle_content'>
   Show my content
</div>

Then I have a simple script that hides my toggle_content on load and another script:

$(".trigger").click(function(){
    $(this).toggleClass("active").next().slideToggle("slow");
    return false; //Prevent the browser jump to the link anchor
});

This works fine… If I move my trigger div next to the toggle_content, this is obvious by the next() function.

So the issue is how do I get it to work with the above structure? I’ve tried doing next(".toggle_content") but this simply sets the class of my trigger div to active and ends there, no magic toggle!

Any enlightenment to the voodoo unnatural world of jQuery would be appreciated.

Answer 1

It looks like you want the next element relative to this element’s parent

$(this).toggleClass("active").parent().next().slideToggle("slow");