Question

I have the an html table which shows master-child details.
On clicking the plus symbol (+) against the master record, corresponding child details to be shown. I have the test setup here http://jsfiddle.net/BEEU3/3/. (which is not perfect)
I know how to traverse the dom to get the child elements but please suggest a solution which yields best performance.

HTML:

<table class="table table-bordered">
<tr>
 <th></th>
 <th>Name</th>
 <th>Details</th>
</tr>
    <tr>
        <td><i class="icon-plus-sign"></i></td>
        <td>name1</td>
        <td>detail1</td>
    </tr>
    <tr class="tr-child">
        <td colspan="3">
            <table class="table table-bordered">
                <tr>
                    <th>SubDetails</th>
                    <th>SubDetails</th>
                </tr>
                <tr>
                    <td>SD1</td>
                    <td>Test1</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

jQuery:

$(".icon-plus-sign").click(function () {
      $('.tr-child').toggle("slow");
});

Answer 1

You can use closest() and next() methods. At first closest() finds the closest tr parent of the clicked element, then next() selects the next sibling of the tr element which is an element with class of .tr-child.

$(".icon-plus-sign").click(function () {
     $(this).closest('tr').next().toggle("slow");
});

Fiddle

• closest()
• next()