Bootstrap 3 - Expanding an Collapsing Nested Table Rows

Question

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 here . My HTML looks like this:

<div id="grandparent" class="list-group-item">
    <div data-toggle="collapse" data-target="#grandparentContent" data-role="expander" data-group-id="grandparent">
        <ul class="list-inline">
            <li id="grandparentIcon">&gt;</li>
            <li>Grandparent</li>
        </ul>
    </div>

    <div class="collapse" id="grandparentContent" aria-expanded="true">
      <table class="table">
        <thead>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Created On</th>
            <th>Last Modified</th>
          </tr>
        </thead>

        <tbody>
          <tr data-toggle="collapse">
            <td><div>&gt;</div></td>
            <td>Parent 1</td>
            <td>04/02/2017</td>
            <td>04/04/2017</td>
          </tr>

          <tr class="collapse">
            <td></td>
            <td>Child A</td>
            <td>04/01/2017</td>
            <td>04/05/2017</td>
          </tr>

          <tr class="collapse">
            <td></td>
            <td>Child B</td>
            <td>04/03/2017</td>
            <td>04/04/2017</td>
          </tr>          

          <tr data-toggle="collapse">
            <td><div>&gt;</div></td>
            <td>Parent 2</td>
            <td>04/03/2017</td>
            <td>04/10/2017</td>
          </tr>

          <tr class="collapse">
            <td></td>
            <td>Child X</td>
            <td>04/10/2017</td>
            <td>04/11/2017</td>
          </tr>          
        </tbody>
      </table>
    </div>
</div>

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.

Answer 1

You can do what you are trying to do by adding two things:

1. A collapsed class that toggles each time a grandparent or parent are clicked, to represent if it is expanded or collapsed.
2. Add CSS so that when the collapsed class is active it shows ">" and when it is not active (it is expanded) it shows a "v".

Updated Bootply Here

Your main issue is that you were missing data-target for your parent rows, and you also were only changing the grandparent icon with your jQuery.

Key jQuery

$('[data-toggle="collapse"]').on('click', function() {
  $(this).toggleClass('collapsed');
});

Key CSS

.collapsed .icon-class:before {
    content: '>';
}
.icon-class:before {
    content: 'v';
}

Answer 2

Heres a fixed version, change the code to your own liking.

http://www.bootply.com/sCCEzKCLsI#

But essentially the show.bs.collapse and hide.bs.collapse events are fired from the .collapse and not the the data-toggle="collapse" element.

Answer 3

Also to addition to WilomGfx's answer , you need to assign the data-target to the table rows.

Preview here

HTML

<div id="grandparent" class="list-group-item">
    <div id="expander" data-toggle="collapse" data-target="#grandparentContent" data-role="expander" data-group-id="grandparent">
        <ul class="list-inline">
            <li id="grandparentIcon">&gt;</li>
            <li>Grandparent</li>
        </ul>
    </div>

    <div class="collapse" id="grandparentContent" aria-expanded="true">
      <table class="table">
        <thead>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Created On</th>
            <th>Last Modified</th>
          </tr>
        </thead>

        <tbody>
          <tr data-toggle="collapse" data-target="#childOne">
            <td><div>&gt;</div></td>
            <td>Parent 1</td>
            <td>04/02/2017</td>
            <td>04/04/2017</td>
          </tr>

          <tr class="collapse" id="childOne">
            <td></td>
            <td>Child A</td>
            <td>04/01/2017</td>
            <td>04/05/2017</td>
          </tr>

          <tr class="collapse">
            <td></td>
            <td>Child B</td>
            <td>04/03/2017</td>
            <td>04/04/2017</td>
          </tr>          

          <tr data-toggle="collapse" data-target="#childTwo">
            <td><div>&gt;</div></td>
            <td>Parent 2</td>
            <td>04/03/2017</td>
            <td>04/10/2017</td>
          </tr>

          <tr class="collapse" id="childTwo">
            <td></td>
            <td>Child X</td>
            <td>04/10/2017</td>
            <td>04/11/2017</td>
          </tr>          
        </tbody>
      </table>
    </div>
</div>

Script

$('.collapse').on('show.bs.collapse', function () {
  var groupId = $('#expander').attr('data-group-id');
  console.log(groupId);
  if (groupId) {
    $('#grandparentIcon').html('v');
  }
});

$('.collapse').on('hide.bs.collapse', function () {
  var groupId = $('#expander').attr('data-group-id');
  console.log(groupId);
  if (groupId) {
    $('#' + groupId + 'Icon').html('>');
  }
});