Question

I need to hide show Table row, but it appears I’m not targeting it properly:

$('.ShowHide').click(function(){
    $(this).next('.hiddenTR').toggle();
});

Here’s my HTML:

<table>
<tr>
    <td><img src="img.gif" class="ShowHide"></td>
    <td>text 1</td>
</tr>
<tr class="hiddenTR">
    <td colspan="2">hidden text 1</td>
</tr>
<tr>
    <td><img src="img.gif" class="ShowHide"></td>
    <td>text 2</td>
</tr>
<tr class="hiddenTR">
    <td colspan="2">hidden text 2</td>
</tr>
</table>

Is it even possible to target like this? I need to show only the TR below and I do not know how many there could be, so using IDs is out of the question.

Need a nudge in the right direction.

Thanks.

Answer 1

If you try to hide the next tr node use:

$('.ShowHide').click(function(){
    $(this).closest('tr').next('.hiddenTR').toggle();
});

reference: .closest()