Question

In my index.php I have TABLE with four rows. One of them contains INPUT class=”sipPacket” the next TEXT the next INPUT class=”sipPacket” the next TEXT. Every two rows are in the TBODY.

<table>
<tbody>
<tr><td><input class="sipPacket" type="radio" /></td></tr>
<tr><td>Some text 1...</td></tr>
</tbody>
<tbody>
<tr><td><input class="sipPacket" type="radio" /></td></tr>
<tr><td>Some text 2...</td></tr>
</tbody>
</table>

I just want that when I check one radio button the part behind the second ‘tr’ with text “Some text 2” in next ‘tbody’ was hidden and vice versa.
I did something like this:

$('.sipPacket')
.live('click',function() {
    if($(this).is(':checked')) {
       $(this).parent().parent().parent().addClass('on').fadeIn().siblings().removeClass('on').children('tr:odd').fadeOut();
    }
});

It hides the second element but does not show it again when I press the radio on this hidden element.

Answer 1

I believe this will do what you’re trying to do (but I’m not 100% sure what you’re trying to achieve, and there may well be an easier way!):

$(".sipPacket").click(function() {
    $(this).closest("tbody").children("tr:eq(1)").fadeIn().end()
        .siblings().children("tr:eq(1)").fadeOut();
});

Here’s a working example. It gets the ancestor tbody using closest (which, as noted in the comments on the question, is much easier than using parent().parent() etc.), then fades in the second tr child of that tbody. It then uses end to get back to the original matched set of elements (which happens to be the tbody), gets the siblings of that element (there is only one) and finally fades out the second tr child of that sibling.