Using jquery closeest () function?

Question

Here is 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> 

And I have this jQuery code,

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

For some reason, the closest() function does not work, and it will not switch the table row .r3c - I tried to use parent and other alternatives, but I can not make it work: (

Apologies for the stupid question and something similar to the problem I had before. Just wondering what is the best solution for this?

Thanks!

Answer 1

Try:

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

Answer 2

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

You need something like:

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

Answer 3

perhaps this would work:

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