Jquery toggle for table with multiple rows

Vote count:

0

I'm trying to show & hide rows of a table which works fine. But I would like that by clicking on the parent row only its child-rows are shown and not all rows.

$(document).ready(function(){
$(".level-1").click(function(){
    
     var target = $(this).parent().children(".level-2");
    $(target).slideToggle("slow");

    });
});  

table tr:nth-child(2n+1) {
    background-color: #F1F1F1;
}
.level-2 {display:none;}
.level-1:hover{cursor:pointer;}

<table border="0" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
       <td width="200">c1</td>
      <td width="200"><b>c2</b></td>
        <td width="200"><b>c3</b></td>
    </tr>
  </thead>
  <tbody>
       <tr class="level-1">
           <td width="200"><b>Parent1</b></td>
      <td class="spalte_1">&nbsp;</td>
      <td class="spalte_2">&nbsp;</td>
    </tr>
    <tr class="level-2">
      <td>child1</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr class="level-2">
      <td>child2</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr class="level-1">
      <td><b>Parent2</b></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr class="level-2">
      <td>child1</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr class="level-2">
      <td>child2</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr class="level-2">
      <td>child3</td>
      <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr class="level-1">
      <td><b>Parent3</b></td>
      <td>&nbsp;</td>
         <td>&nbsp;</td>
    </tr>
    <tr class="level-2">
      <td>child1</td>
      <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr class="level-2">
      <td>child2</td>
      <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

Link to fiddle: fiddle Thanks for your help and suggestions!

asked 35 secs ago

Sonique

1

Jquery toggle for table with multiple rows