title: hide child element with dynamic bootstrap table
body: <p>I'm using a dynamic table example I found <a href="http://www.bootply.com/GGAMvot45f#" rel="nofollow">here</a> (bootply). Its basically a table with a parent, child relationship, so you can click on a row and it will drop down another row. I added one more level to this example, so you can think of this example as a parent, child, grandchild relationship. My issue is that if you go two levels deep, and then click the parent row it only hides the child row, but not the grandchild rows. I need to fix this 'bug' somehow.. I've tried wrapping the parent row in a div and using href="#collapse1" and than putting that id on the grandchild row but that doesn't work. Any other suggestions are greatly appreciated.  Here's the html.. </p>
  
  <pre><code>&lt;table class="table table-responsive table-hover"&gt;
    &lt;thead&gt;
          &lt;tr&gt;&lt;th&gt;Column&lt;/th&gt;&lt;th&gt;Column&lt;/th&gt;&lt;th&gt;Column&lt;/th&gt;&lt;th&gt;Column&lt;/th&gt;&lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr class="clickable" data-toggle="collapse" id="row1" data-target=".row1"&gt;
              &lt;td&gt;&lt;i class="glyphicon glyphicon-plus"&gt;&lt;/i&gt;&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;  
              &lt;td&gt;data&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="collapse row1"&gt;
              &lt;td&gt;- child row&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;  
              &lt;td&gt;data&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="clickable collapse row1" data-toggle="collapse" id="row3" data-target=".row3"&gt;
              &lt;td&gt;- child row&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;  
              &lt;td&gt;data&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="collapse row3"&gt;
          &lt;td&gt;- grandchild row&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;  
              &lt;td&gt;data&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="clickable" data-toggle="collapse" id="row2" data-target=".row2"&gt;
              &lt;td&gt;&lt;i class="glyphicon glyphicon-plus"&gt;&lt;/i&gt;&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;
              &lt;td&gt;data&lt;/td&gt;  
              &lt;td&gt;data&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="collapse row2"&gt;
              &lt;td&gt;- child row&lt;/td&gt;
              &lt;td&gt;data 2&lt;/td&gt;
              &lt;td&gt;data 2&lt;/td&gt;  
              &lt;td&gt;data 2&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="collapse row2"&gt;
              &lt;td&gt;- child row&lt;/td&gt;
              &lt;td&gt;data 2&lt;/td&gt;
              &lt;td&gt;data 2&lt;/td&gt;  
              &lt;td&gt;data 2&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Doesn't work with a fiddle.js for some reason.. but if you go to the link and copy&amp;paste this code you can replicate the issue. </p>