javascript - Expand and collapse child row on click of a link in the parent row of a table -

guys i'm newbie jquery. i've make child rows in table hide , show on click of link in parent row. i've tried use jquery toggle, dont know how make work when there multiple rows.

here's table -

<table class="table table-striped reporttable">      <thead>           <tr>               <th>product type</th>               <th>product name</th>               <th>face value</th>               <th>my stock</th>               <th>ordered stock</th>               <th>sub account stock</th>           </tr>      </thead>      <tbody>           <tr>                <td><a class="showhr" href="#">sim</a></td>                <td></td>                <td></td>                <td>574,888</td>                <td>0</td>                <td>0</td>           </tr>           <tr class="aser"> <!--child row-->                <td></td>                <td>epin £5</td>                <td>£05</td>                <td></td>                <td></td>                <td></td>            </tr>            <tr class="aser"> <!--child row-->                <td></td>                <td>epin £10</td>                <td>£15</td>                <td></td>                <td></td>                <td></td>            </tr>            <tr>                <td><a class="showhr" href="#">sim</a></td>                <td></td>                <td></td>                <td>574,888</td>                <td>0</td>                <td>0</td>           </tr>           <tr class="aser"> <!--child row-->                <td></td>                <td>epin £5</td>                <td>£05</td>                <td></td>                <td></td>                <td></td>            </tr>            <tr class="aser"> <!--child row-->                <td></td>                <td>epin £10</td>                <td>£15</td>                <td></td>                <td></td>                <td></td>            </tr>       </tbody> </table> 

jquery -

<script type="text/javascript">      $(document).ready(function () {          $(".showhr").click(function () {            $(".aser").toggle("slow", function () {                            });         });     }) </script> 

i'm not sure if jquery toggle idea this. appreciated. thanks.

you can using closest() , nextuntil() methods , :has() pseudo selector following.

$(".showhr").click(function() {      $(this).closest('tr').nextuntil("tr:has(.showhr)").toggle("slow", function() {});  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table class="table table-striped reporttable">      <thead>          <tr>              <th>product type</th>              <th>product name</th>              <th>face value</th>              <th>my stock</th>              <th>ordered stock</th>              <th>sub account stock</th>          </tr>      </thead>      <tbody>          <tr>              <td><a class="showhr" href="#">sim</a></td>              <td></td>              <td></td>              <td>574,888</td>              <td>0</td>              <td>0</td>          </tr>          <tr class="aser">              <!--child row-->              <td></td>              <td>epin £5</td>              <td>£05</td>              <td></td>              <td></td>              <td></td>          </tr>          <tr class="aser">              <!--child row-->              <td></td>              <td>epin £10</td>              <td>£15</td>              <td></td>              <td></td>              <td></td>          </tr>          <tr>              <td><a class="showhr" href="#">sim</a></td>              <td></td>              <td></td>              <td>574,888</td>              <td>0</td>              <td>0</td>          </tr>          <tr class="aser">              <!--child row-->              <td></td>              <td>epin £5</td>              <td>£05</td>              <td></td>              <td></td>              <td></td>          </tr>          <tr class="aser">              <!--child row-->              <td></td>              <td>epin £10</td>              <td>£15</td>              <td></td>              <td></td>              <td></td>          </tr>      </tbody>  </table>