SO Help

Collapsible table

HTML

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="stylesheet.css">
		<title>Insert Page Title</title>
		<script src="javascript.js"></script>
		<meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	
	<body>
		<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...

JavaScript

function test() {
    var collapse = document.getElementsByClassName("catOne");
    var i = 0;//Counter for loops

    for (i = 0; i < collapse.length; i += 1) {
        collapse[i].style.display = "none";
    }