title: Expand and collapse child row on click of a link in the parent row of a table
body: <p><a href="https://i.stack.imgur.com/Si4B7.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Si4B7.jpg" alt="enter image description here"></a></p>
  
  <p>Guys i'm a newbie to jQuery. I've to make the child rows in a table to hide and show on click of a link in the parent row. I've tried to use jQuery toggle, but i dont know how to make it work when there are multiple rows. </p>
  
  <p>Here's the table - </p>
  
  <pre><code>&lt;table class="table table-striped reportTable"&gt;
       &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;Product Type&lt;/th&gt;
                &lt;th&gt;Product Name&lt;/th&gt;
                &lt;th&gt;Face Value&lt;/th&gt;
                &lt;th&gt;My Stock&lt;/th&gt;
                &lt;th&gt;Ordered Stock&lt;/th&gt;
                &lt;th&gt;Sub Account Stock&lt;/th&gt;
            &lt;/tr&gt;
       &lt;/thead&gt;
       &lt;tbody&gt;
            &lt;tr&gt;
                 &lt;td&gt;&lt;a class="showhr" href="#"&gt;SIM&lt;/a&gt;&lt;/td&gt;
                 &lt;td&gt;&lt;/td&gt;
                 &lt;td&gt;&lt;/td&gt;
                 &lt;td&gt;574,888&lt;/td&gt;
                 &lt;td&gt;0&lt;/td&gt;
                 &lt;td&gt;0&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr class="aser"&gt; &lt;!--child row--&gt;
                 &lt;td&gt;&lt;/td&gt;
                 &lt;td&gt;EPin £5&lt;/td&gt;
                 &lt;td&gt;£05&lt;/td&gt;
                 &lt;td&gt;&lt;/td&gt;
                 &lt;td&gt;&lt;/td&gt;
                 &lt;td&gt;&lt;/td&gt;
             &lt;/tr&gt;
             &lt;tr class="aser"&gt; &lt;!--child row--&gt;
                 &lt;td&gt;&lt;/td&gt;
                 &lt;td&gt;EPin £10&lt;/td&gt;
                 &lt;td&gt;£15&lt;/td&gt;
                 &lt;td&gt;&lt;/td&gt;
                 &lt;td&gt;&lt;/td&gt;
                 &lt;td&gt;&lt;/td&gt;
             &lt;/tr&gt;
             &lt;tr&gt;
                 &lt;td&gt;&lt;a class="showhr" href="#"&gt;SIM&lt;/a&gt;&lt;/td&gt;
                 &lt;td&gt;&lt;/td&gt;
                 &lt;td&gt;&lt;/td&gt;
                 &lt;td&gt;574,888&lt;/td&gt;
                 &lt;td&gt;0&lt;/td&gt;
                 &lt;td&gt;0&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr class="aser"&gt; &lt;!--child row--&gt;
                 &lt;td&gt;&lt;/td&gt;
                 &lt;td&gt;EPin £5&lt;/td&gt;
                 &lt;td&gt;£05&lt;/td&gt;
                 &lt;td&gt;&lt;/td&gt;
                 &lt;td&gt;&lt;/td&gt;
                 &lt;td&gt;&lt;/td&gt;
             &lt;/tr&gt;
             &lt;tr class="aser"&gt; &lt;!--child row--&gt;
                 &lt;td&gt;&lt;/td&gt;
                 &lt;td&gt;EPin £10&lt;/td&gt;
                 &lt;td&gt;£15&lt;/td&gt;
                 &lt;td&gt;&lt;/td&gt;
                 &lt;td&gt;&lt;/td&gt;
                 &lt;td&gt;&lt;/td&gt;
             &lt;/tr&gt;
        &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>jQuery - </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
       $(document).ready(function () { 
          $(".showhr").click(function () {
             $(".aser").toggle("slow", function () {                
             });
          });
      })
  &lt;/script&gt;
  </code></pre>
  
  <p>I'm not sure if jQuery toggle is a good idea for this. Any help would be appreciated. Thanks.</p>