Question

I have this function:

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

That worked fine with:

<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’m putting “expandimg” inside a table column and “toggle_container” inside another column. Something like this:

<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 on “expandimg” to expand the “toggle_container”, but it’s not working with the function I have.

Thanks!

Answer 1

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