Looking for a way to toggle the visibility of certain rows in an HTML table using a button but having trouble placing the button after the table instead of before. Any suggestions on how to customize this setup? Thanks!
/*Use CSS to hide the rows of the table that is next to check box that is next to an element with a class of tableToggle*/
.tableToggle + input[type="checkbox"]:checked + table>tbody>tr:nth-child(n+2) {
display: none;
}
/*Hide the checkbox*/
.tableToggle + input[type="checkbox"] {display:none;}
/*Button Styling only -- noting important here*/
.tableToggle{
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
padding:5px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}<label class="tableToggle" for="cb1">Toggle Rows</label><input id="cb1" type="checkbox" checked="checked">
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>R1 C1</td>
<td>R1 C2</td>
<td>R1 C3</td>
</tr>
<tr>
<td>R2 C1</td>
<td>R2 C2</td>
<td>R2 C3</td>
</tr>
<tr>
<td>R3 C1</td>
<td>R3 C2</td>
<td>R3 C3</td>
</tr>
</tbody>
</table>