jquery next() outside of div

Question

Hi,

I'm trying to use next() to toggle a div. The problem is that the "trigger" is in a different div than the one I want to toggle. An example that works:

$("span.trigger").click(function(){
        $(this).next("div.task_description").slideToggle("fast");
});

<span class="trigger">The trigger</span>
<div class="task_description ">
  some content
</div>

But the way I need the html setup is:

<div>
  <span class="trigger">The trigger</span>
</div>
<div class="task_description ">
  some content
</div>

That doesn't work... any suggestions?

Answer 1

In this case you need a .parent() as well, like this:

$("span.trigger").click(function(){
  $(this).parent().next("div.task_description").slideToggle("fast");
});

Alternatively, if your nesting may change, you can go up to the <div> you're in, like this:

$(this).closest("div").next("div.task_description").slideToggle("fast");