JSFiddle - React, Tailwind, and code Playground

by sammie85

HTML

<div style="width:400px; margin:0px auto;">
<table class="table table-bordered">
    <thead>
        <tr>
            <th width="40%">Page Title</th>
            <th>Page Content</th>
        </tr>
    </thead>
    <tbody>
    
 <tr><td><input type="checkbox" id="boxChecked4" onclick="boxChecked4(this.checked);" /> Page A</td><td>Content</td></tr>
 
 <tbody id="rowChk4" style="display:none;" class="subpages_bg">
    
 <tr><td>Page A1</td><td>Content</td></tr>
 <tr><td>Page A2</td><td>Content</td></tr>
 <tr><td>Page A3</td><td>Content</td></tr>
 <tr><td>Page A4</td><td>Content</td></tr>

    </tbody>
 
 <tr><td>Page B</td><td>Content</td></tr>
 <tr><td>Page C</td><td>Content</td></tr>
 
  <tr><td><input type="checkbox" id="boxChecked16" onclick="boxChecked16(this.checked);" /> Page D</td><td>Content</td></tr>
 
 <tbody id="rowChk16" style="display:none;" class="subpages_bg">
    
 <tr><td>Page D1</td><td>Content</td></tr>
 <tr><td>Page D2</td><td>Content</td></tr>
 <tr><td>Page D3</td><td>Content</td></tr>
 <tr><td>Page D4</td><td>Content</td></tr>

    </tbody>
 
 <tr><td>Page E</td><td>Content</td></tr>
 
 
  <tr><td><input type="checkbox" id="boxChecked11" onclick="boxChecked11(this.checked);" /> Page F</td><td>Content</td></tr>
 
 <tbody id="rowChk11" style="display:none;" class="subpages_bg">
    
 <tr><td>Page F1</td><td>Content</td></tr>
 <tr><td>Page F2</td><td>Content</td></tr>
 <tr><td>Page F3</td><td>Content</td></tr>
 <tr><td>Page F4</td><td>Content</td></tr>

    </tbody>

    </tbody>
</table>


</div>

CSS

<style>

/* Tables */

table { max-width: 100%; border-collapse: collapse; border-spacing: 0;}
.table { width: 100%; margin-bottom: 18px;}
.table th {background: #818181; color:#FFF;}
.table th, .table td { padding: 8px; font-size:13px; line-height: 18px; text-align: left; border-top: 1px solid #ddd;}
.table th { font-weight: bold; font-size:13px; vertical-align: bottom;}
.table td { vertical-align: top;}
.table thead:first-child tr th, .table thead:first-child tr td { border-top: 0;}
.table tbody + tbody {border-top: 2px solid #ddd;}
.table-condensed th, .table-condensed td { padding: 4px 5px;}
.table-bordered { border: 1px solid #ddd; border-collapse: separate; *border-collapse: collapsed;border-radius: 4px;}
.table-bordered th + th,
.table-bordered td + td,
.table-bordered th + td,
.table-bordered td + th { border-left: 1px solid #ddd;}
.table-bordered thead:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child td { border-top: 0;}
.table-bordered thead:first-child tr:first-child th:first-child, .table-bordered tbody:first-child tr:first-child td:first-child {border-radius: 4px 0 0 0;}
.table-bordered thead:first-child tr:first-child th:last-child, .table-bordered tbody:first-child tr:first-child td:last-child {border-radius: 0 4px 0 0;}
.table-bordered thead:last-child tr:last-child th:first-child, .table-bordered tbody:last-child tr:last-child td:first-child {border-radius: 0 0 0 4px;}
.table-bordered thead:last-child tr:last-child th:last-child, .table-bordered tbody:last-child tr:last-child td:last-child {border-radius: 0 0 4px 0;}
.table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th {background-color: #f9f9f9;}
.table-striped2 thead th,.table-striped2 tbody tr td:first-child {background-color: #f9f9f9;}


tbody.subpages_bg tr {background: #F5F5F5;}
 
</style>

JavaScript

// JavaScript Document

function boxChecked1(boxChk1)
{
if(boxChk1)
{
document.getElementById("rowChk1").style.display = "";
}
else
{
document.getElementById("rowChk1").style.display = "none";
}
}



function boxChecked2(boxChk2)
{
if(boxChk2)
{
document.getElementById("rowChk2").style.display = "";
}
else
{
document.getElementById("rowChk2").style.display = "none";
}
}




function boxChecked3(boxChk3)
{
if(boxChk3)
{
document.getElementById("rowChk3").style.display = "";
}
else
{
document.getElementById("rowChk3").style.display = "none";
}
}



function boxChecked4(boxChk4)
{
if(boxChk4)
{
document.getElementById("rowChk4").style.display = "";
}
else
{
document.getElementById("rowChk4").style.display = "none";
}
}




function boxChecked5(boxChk5)
{
if(boxChk5)
{
document.getElementById("rowChk5").style.display = "";
}
else
{
document.getElementById("rowChk5").style.display = "none";
}
}




function boxChecked6(boxChk6)
{
if(boxChk6)
{
document.getElementById("rowChk6").style.display = "";
}
else
{
document.getElementById("rowChk6").style.display = "none";
}
}



function boxChecked7(boxChk7)
{
if(boxChk7)
{
document.getElementById("rowChk7").style.display = "";
}
else
{
document.getElementById("rowChk7").style.display = "none";
}
}



function boxChecked8(boxChk8)
{
if(boxChk8)
{
document.getElementById("rowChk8").style.display = "";
}
else
{
document.getElementById("rowChk8").style.display = "none";
}
}



function boxChecked9(boxChk9)
{
if(boxChk9)
{
document.getElementById("rowChk9").style.display = "";
}
else
{
document.getElementById("rowChk9").style.display = "none";
}
}



function boxChecked10(boxChk10)
{
if(boxChk10)
{
document.getElementById("rowChk10").style.display = "";
}
else
{
document.getElementById("rowChk10").style.display = "none";
}
}



function boxChecked11(boxChk11)
{
if(boxChk11)
{
document.getElementById("rowChk11").style.display = "";
}
else
{
document.getElementById("rowChk11").style.display = "none";
}
}



function...