Using the Jquery closest() function?

Question

Hi guys,

Currently got this JQuery code...

$(document).ready(function(){
    $(".r3c").hide();

    $('.show_r3c').click(function() { $(this).closest('.r3c').toggle(); return false; });
});

And here's my HTML:

<tr>
    <td class="show_r3c">click here</td>
</tr>
<tr class="r3c">
    <td>This is what I'd like to display</td>
</tr>

For some reason the closest() function isn't working, and it won't toggle the table row .r3c - I've tried using parent and other alternatives but can't get it working eitehr :(

Apologies for the silly question, and something similar to a problem I've had before... just wondering what the best solution is for this.

Thanks!

Answer 1

perhaps this would work:

$(document).ready(function(){
    $(".r3c").hide();

    $('.show_r3c').click(function() { 
        $(this).parent().siblings(":first").toggle(); 
        return false; 
    });
});

Answer 2

closest() finds the closest parent not the parents-siblings-children.

You want something like:

$(document).ready(function(){
    $(".r3c").hide();

    $('.show_r3c').click(function() { 
        $(this).closest('table').find("tr.r3c").toggle(); return false; 
    });
});

Answer 3

Try with:

$('.show_r3c').click(function() {
  $(this).parent('tr').next('tr.r3c').toggle();
  return false;
});