tbody arrangement with sub-grouping

by diegoj2020

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Regian</th>
      <th>Q1 2010</th>
      <th>Q2 2010</th>
      <th>Q3 2010</th>
      <th>Q4 2010</th>
    </tr>
  </thead>
  <tbody>
  <tbody class="labels">
    <tr>
      <td colspan="5">
        <label for="accounting">Accounting</label>
        <input type="checkbox" name="accounting" id="accounting" data-toggle="toggle">
      </td>
    </tr>
  </tbody>
  <tbody class="hide">
    <tr>
      <td>Australia</td>
      <td>$7,685.00</td>
      <td>$3,544.00</td>
      <td>$5,834.00</td>
      <td>$10,583.00</td>
    </tr>
      <tr>
        <td>Central America</td>
        <td>$7,685.00</td>
        <td>$3,544.00</td>
      <td>$5,834.00</td>
      <td>$10,583.00</td>
    </tr>
  </tbody>
  <tbody class="labels">
    <tr>
      <td colspan="5">
        <label for="management">Management</label>
        <input type="checkbox" name="management" id="management" data-toggle="toggle">
      </td>
    </tr>
  </tbody>
  <tbody class="hide">
    <tr>
      <td>Australia</td>
      <td>$7,685.00</td>
      <td>$3,544.00</td>
      <td>$5,834.00</td>
      <td>$10,583.00</td>
    </tr>
    <tr>
      <td>Central America</td>
      <td>$7,685.00</td>
      <td>$3,544.00</td>
      <td>$5,834.00</td>
      <td>$10,583.00</td>
    </tr>
    <tr>
      <td>Europe</td>
      <td>$7,685.00</td>
      <td>$3,544.00</td>
      <td>$5,834.00</td>
      <td>$10,583.00</td>
    </tr>
    <tr>
      <td>Middle East</td>
      <td>$7,685.00</td>
      <td>$3,544.00</td>
      <td>$5,834.00</td>
      <td>$10,583.00</td>
    </tr>
  </tbody>
  </tbody>
</table>

CSS

table {
  width: 750px;
  border-collapse: collapse;
  margin: 50px auto;
}

th {
  background: #3498db;
  color: white;
  font-weight: bold;
}

td,
th {
  padding: 10px;
  border: 1px solid #ccc;
  text-align: left;
  font-size: 18px;
}

.labels tr td {
  background-color: #2cc16a;
  font-weight: bold;
  color: #fff;
}

.label tr td label {
  display: block;
}


[data-toggle="toggle"] {
  display: none;
}
tbody tbody { font-weight: bold; }

JavaScript

$(document).ready(function() {
  $('[data-toggle="toggle"]').change(function() {
    $(this).parents().next('.hide').toggle();
  });
});