Click row to show/hide subcategories

Click on a row to show or hide its subcategories

by Mark Sayson

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<h3>Click on a category row to expand it</h3>
<br>
<table class="table table-bordered">
  <tr>
    <th>Category</th>
    <th>Subcategory</th>
    <th>Total</th>
  </tr>
  <tr class="category-row" id="category-a">
    <td>A</td>
    <td></td>
    <td>5</td>
  </tr>
  <tr class="subcategory-row category-a-subcategory">
    <td></td>
    <td>A.1</td>
    <td>5</td>
  </tr>
  <tr class="category-row" id="category-b">
    <td>B</td>
    <td></td>
    <!-- Leave column empty for top-level category -->
    <td>7</td>
  </tr>
  <tr class="subcategory-row category-b-subcategory">
    <td></td>
    <td>B.1</td>
    <td>6</td>
  </tr>
  <tr class="subcategory-row category-b-subcategory">
    <td></td>
    <td>B.2</td>
    <td>1</td>
  </tr>
</table>

CSS

.subcategory-row {
  background-color: #f9f9f9;
}

JavaScript

$('.subcategory-row').hide();
$('.category-row').click(function(event) {
  var subcategory_class, category_id;
  category_id = $(this).attr('id');
  subcategory_identifier = '.' + category_id + '-subcategory';
  $(subcategory_identifier).toggle();
});