SO Help

Collapsible table

HTML

<h1>Insert Header</h1>

<table>
  <!--Header-->
  <tr>
    <th>CARES Metric</th>
    <th>This call</th>
    <th>Overall</th>
    <th>Percent</th>
  </tr>

  <tr>
    <td colspan="4" class="categoryHeader">Category One
      <button type="button" onclick="test()">Test collapse category</button>    
    </td>
  </tr>

  <tr class="catOne">
    <td>Cares metric one description.</td>
    <td>
      <input id="checkBoxOne" type="checkbox" name="metricDone" value="check">
    </td>
    <td>
      <div id="rowOneTotal">/</div>
    </td>
    <td>
      <div id="rowOnePercent">%</div>
    </td>
  </tr>

  <tr class="catOne">
    <td>METRIC TWO</td>
    <td>
      <input id="checkBoxTwo" type="checkbox" name="metricDone" value="check">
    </td>
    <td>
      <div id="rowTwoTotal">/</div>
    </td>
    <td>
      <div id="rowTwoPercent">%</div>
    </td>
  </tr>

  <tr class="catOne">
    <td>METRIC THREE</td>
    <td>
      <input id="checkBoxThree" type="checkbox" name="metricDone" value="check">
    </td>
    <td>
      <div id="rowThreeTotal">/</div>
    </td>
    <td>
      <div id="rowThreePercent">%</div>
    </td>
  </tr>

  <tr class="catOne">
    <td>METRIC FOUR</td>
    <td>
      <input id="checkBoxFour" type="checkbox" name="metricDone" value="check">
    </td>
    <td>
      <div id="rowFourTotal">/</div>
    </td>
    <td>
      <div id="rowFourPercent">%</div>
    </td>
  </tr>

  <tr>
    <td colspan="4" class="categoryHeader">Category Two</td>
  </tr>

  <tr>
    <td>METRIC FIVE</td>
    <td>
      <input id="checkBoxFive" type="checkbox" name="metricDone" value="check">
    </td>
    <td>
      <div id="rowFiveTotal">/</div>
    </td>
    <td>
      <div id="rowFivePercent">%</div>
    </td>
  </tr>

  <tr>
    <td>METRIC SIX</td>
    <td>
      <input id="checkBoxSix" type="checkbox" name="metricDone" value="check">
    </td>
    <td>
      <div id="rowSixTotal">/</div>
    </td>
    <td>
      <div id="rowSixPercent">%</div>
    </td>
 ...

CSS

.hide-me
{
  display: none;
}

JavaScript

function test() {
  var collapse = document.getElementsByClassName("catOne");

  for (var i = 0; i < collapse.length; i++) {
    collapse[i].classList.toggle("hide-me");
  }
}