title: Table row hide/collapse
body: <p>In given example hide/collapse play well, but when I click on "L-C" link(bg-yellow) of "This is parent 1" it show only one hidden tr that is "This is 1st Child" when there are 2 hidden layer bellow "This is parent 1", I need when I click on "L-C" both hidden layer open at a time, check the HTML structure removing ".hidden" class from CSS.</p>
  
  <p><strong>HTML :</strong></p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td class="details-control"&gt;&lt;a&gt;L-O&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;This is parent 1&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class = "hidden"&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;This is 1st Child&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class = "hidden"&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;This is 2nd Child&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="details-control"&gt;&lt;a&gt;L-O&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;This is parent 2&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class = "hidden"&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;This is 1st Child&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>CSS :</strong></p>
  
  <pre><code>a {width:50px; display: block; background: yellow}
  
  .hidden {
      display: none;
  }
  
  .details-control {
      cursor:pointer;
  }
  </code></pre>
  
  <p><strong>jQuery :</strong></p>
  
  <pre><code>$('.details-control').click(function() {
      var $td = $(this);
  
      if ($td.html() == '&lt;a&gt;L-O&lt;/a&gt;') {
          $td.html('&lt;a&gt;L-C&lt;/a&gt;');
          $td.parent().next(".hidden").show();
      } else {
          $td.html('&lt;a&gt;L-O&lt;/a&gt;');
          $td.parent().next(".hidden").hide();
      }  
  })
  </code></pre>
  
  <p><strong><a href="https://jsfiddle.net/alpeshlahad/y98aty4c/1/" rel="nofollow">JSFiddle Here</a></strong></p>