What is the correct jQuery selector for this?

Question

I'm trying to select a nested table to display some tabular data using jQuery but for some reason it just doesn't want to work. This thing is normally quite straight-forward but it's beaten me!

Here is my html:

<table class="data canexpand" width="100%" cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <th width="25px">&nbsp;</th>
                    <th>Training/Qualification</th>
                    <th>Category</th>
                    <th>Multiple Dates?</th>
                    <th>&nbsp;</th>
                    <th>&nbsp;</th>
                </tr>
                <tr>
                    <td><div class="expand"></div></td>
                    <td>Example training course</td>
                    <td>Energy</td>
                    <td>Yes</td>
                    <td>&nbsp;</td>
                    <td><a href="#" title="Edit" class="button orange xsmall">Edit</a></td>
                </tr>
                <tr class="nested houdini">
                    <td colspan="6">
                        <table class="data" width="100%" cellpadding="0" cellspacing="0">
                            <tbody>
                                <tr>
                                    <th width="25px">&nbsp;</th>
                                    <th>Course date</th>
                                    <th>Course location</th>
                                    <th>Attending</th>
                                    <th>Availability</th>
                                    <th>&nbsp;</th>
                                </tr>
                                <tr>
                                    <td>&nbsp;</td>
                                    <td>22/12/12</td>
                                    <td>Birmingham NEC</td>
                                    <td>23</td>
                                    <td>27</td>
                                    <td><a href="#" class="button green xsmall" title="Print delegate list">Print delegate list</a></td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>

Here is my jQuery:

/* Add accordian functionality to data tables */
$('table.canexpand .expand').click(function() {
    $(this).parents().next('tr.nested').toggleClass('houdini');
});

Forgive me if this is totally the wrong selector to use but i've tried everything parent(), parents(), next(), find() etc in all combos. Just can't get this one! Can anyone assist?

Answer 1

You could also, for example, add a hidden a tag within .expand, and then set the href to the id of the target element to collapse. Example:

<tr>
  <td><div class="expand"><a class='hidden' href='#foobar'></a></div></td>
  <td>Example training course</td>
  <td>Energy</td>
  <td>Yes</td>
  <td>&nbsp;</td>
  <td><a href="#" title="Edit" class="button orange xsmall">Edit</a></td>
</tr>
<tr id='foobar' class="nested houdini">

And then use:

$('.expand').bind('click', function() {
  $($(this).find('a').attr('href')).toggleClass('houdini');
  return false;
}

Of course adding error checking as appropriate. That way, your jQuery is a lot less dependent upon your markup structure so that when you have to tweak your markup later on, the code isn't as brittle.

Answer 2

$(this).closest('tr').next('tr.nested')

or

$(this).closest('tr').siblings('tr.nested')