JQuery Find Next Element Inside Row Table

Question

I have this function:

$("span.expandimg").click(function(){
  $(this).nextAll(".toggle_container:first").slideToggle("slow");
});

This worked fine:

<span class="expandimg"><a href="#"><img id="iexpand" src="images/expand.png" border="0" /><img id="icollapse" src="images/collapse.png" border="0" /></a></span>&nbsp;<a href="asdfa" class="DSF">First Link</a>

<div class="toggle_container">
Some Text
</div>

But now I put "expandimg" inside the table column and "toggle_container" inside another column. Something like that:

<tr>
  <td><span class="expandimg">......</td>
  <td><div class="toggle_container">.....</td>
<tr>

How can I find the toggle_container element now? I want to click expandimg to expand toggle_container, but it does not work with the function that I have.

Thank!

Answer 1

$("span.expandimg").click(function(){
    $(this)
        .closest("tr")
        .find("td .toggle_container")
        .slideToggle("slow");
});

Answer 2

With the HTML you have, this should work -

$("span.expandimg").click(function(){
  $(this).parent().siblings().find(".toggle_container:first").slideToggle("slow");
});

Demo - http://jsfiddle.net/QAkKP/

Answer 3

$("span.expandimg").click(function(){
  $(this).parents("tr").find(".toggle_container").slideToggle("slow");
});

TR, .toggle_container.

:)