Joshua's Blog

Here is a great example of Bootstrap Playground! An expandable boot strap 3 table.

Run Here 

Jquery

$('.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('>');
  }
});

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>