<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>
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;
}
$(document).ready(function() {
  $('[data-toggle="toggle"]').change(function(){
    $(this).parents().next('.hide').toggle();
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js