Collapsible table

by Rob Sedgwick

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <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=".child1">
          <td>
            <div>&gt;</div>
          </td>
          <td>Parent 1</td>
          <td>04/02/2017</td>
          <td>04/04/2017</td>
        </tr>

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

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

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

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

JavaScript

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

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