title: Bootstrap 3 - Expanding and Collapsing Table Rows
body: <p>I have a <code>table</code> in a web page with Bootstrap. This <code>table</code> has rows that I want to expand/collapse. It is intended to act like a hierarchy. You can see the <code>table</code> in this <a href="http://www.bootply.com/xNoTTwV8XT" rel="nofollow noreferrer">Bootply</a>. You can see that it successfully expands / collapses the "grandparent" content. However, it doesn't expand/collapse each "parent" element's content as needed. </p>
  
  <p>How do I expand / collapse the child rows in this <code>table</code>? Here is my HTML:</p>
  
  <pre><code>&lt;div class="list-group-item" id="grandparent"&gt;
      &lt;div id="expander" data-target="#grandparentContent" data-toggle="collapse" data-group-id="grandparent" data-role="expander"&gt;
          &lt;ul class="list-inline"&gt;
              &lt;li id="grandparentIcon"&gt;&amp;gt;&lt;/li&gt;
              &lt;li&gt;Grandparent&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class="collapse" id="grandparentContent" aria-expanded="true"&gt;
        &lt;table class="table"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Created On&lt;/th&gt;
              &lt;th&gt;Last Modified&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;tbody&gt;
            &lt;tr data-toggle="collapse"&gt;
              &lt;td&gt;&lt;div&gt;&amp;gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;Parent 1&lt;/td&gt;
              &lt;td&gt;04/02/2017&lt;/td&gt;
              &lt;td&gt;04/04/2017&lt;/td&gt;
            &lt;/tr&gt;
  
            &lt;tr class="collapse"&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;Child A&lt;/td&gt;
              &lt;td&gt;04/01/2017&lt;/td&gt;
              &lt;td&gt;04/05/2017&lt;/td&gt;
            &lt;/tr&gt;
  
            &lt;tr class="collapse"&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;Child B&lt;/td&gt;
              &lt;td&gt;04/03/2017&lt;/td&gt;
              &lt;td&gt;04/04/2017&lt;/td&gt;
            &lt;/tr&gt;          
  
            &lt;tr data-toggle="collapse"&gt;
              &lt;td&gt;&lt;div&gt;&amp;gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;Parent 2&lt;/td&gt;
              &lt;td&gt;04/03/2017&lt;/td&gt;
              &lt;td&gt;04/10/2017&lt;/td&gt;
            &lt;/tr&gt;
  
            &lt;tr class="collapse"&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;Child X&lt;/td&gt;
              &lt;td&gt;04/10/2017&lt;/td&gt;
              &lt;td&gt;04/11/2017&lt;/td&gt;
            &lt;/tr&gt;          
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>