title: Bootstrap 3 - Expanding an Collapsing Nested Table Rows
body: <p>I have a web page that uses Bootstrap 3. In this page, I'm trying to show the relationship between grandparent, parent, and child. To do this, I have table rows that can expand/collapse. I've setup a Bootply <a href="http://www.bootply.com/rWyiyCvU4Z" rel="nofollow noreferrer">here</a>. My HTML looks like this:</p>
  
  <pre><code>&lt;div id="grandparent" class="list-group-item"&gt;
      &lt;div data-toggle="collapse" data-target="#grandparentContent" data-role="expander" data-group-id="grandparent"&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>
  
  <p>When either a grandparent or parent is expanded, I'm trying to change the related icon from ">" to "v". However, this doesn't work. I don't understand why. Any help is appreciated.</p>