jquery - Table row hide/collapse -

in given example hide/collapse play well, when click on "l-c" link(bg-yellow) of "this parent 1" show 1 hidden tr "this 1st child" when there 2 hidden layer bellow "this parent 1", need when click on "l-c" both hidden layer open @ time, check html structure removing ".hidden" class css.

html :

<table>     <tr>         <td class="details-control"><a>l-o</a></td>         <td>this parent 1</td>     </tr>     <tr class = "hidden">         <td></td>         <td>this 1st child</td>     </tr>     <tr class = "hidden">         <td></td>         <td>this 2nd child</td>     </tr>     <tr>         <td class="details-control"><a>l-o</a></td>         <td>this parent 2</td>     </tr>     <tr class = "hidden">         <td></td>         <td>this 1st child</td>     </tr> </table> 

css :

a {width:50px; display: block; background: yellow}  .hidden {     display: none; }  .details-control {     cursor:pointer; } 

jquery :

$('.details-control').click(function() {     var $td = $(this);      if ($td.html() == '<a>l-o</a>') {         $td.html('<a>l-c</a>');         $td.parent().next(".hidden").show();     } else {         $td.html('<a>l-o</a>');         $td.parent().next(".hidden").hide();     }   }) 

jsfiddle here

use nextuntil(), :not() pseudo selector.

$td.parent().nextuntil(":not('.hidden')").show(); 

demo