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

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

or

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