<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <table class="custom-table"> <thead> <tr> <th>Page Name</th> <th>Light House Report Filename</th> <th>Page Id</th> <th>Sess Id</th> <th>Child Id</th> <th>Gen Id</th> <th>Group Name</th> <th>Host Id</th> <th>Browser Type</th> <th>Performance Score</th> <th>Accessibility Score</th> <th>PWA Score</th> <th>Best Practice Score</th> <th>SEO Score</th> <th>Frst Contntful Paint</th> <th>Frst Meaningful Paint</th> <th>TTI</th> <th>Speed Index</th> <th>Frst CPU Idle</th> <th>Estimated Input Latency</th> </tr> </thead> <tbody> <tr> <td colspan="20" class="page-header"><button type="button" class="tbtn"><i class="fa fa-plus-circle fa-minus-circle"></i>   P_index</button> </td> </tr> <tr class="toggler toggler1"> <td rowspan="5"></td> <td><a href="#">lighthouse+0_0_0_0_0_0_0_0_0.html</a></td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>12</td> <td>23</td> <td>67</td> <td>100</td> <td>4420</td> <td>4420</td> <td>15360</td> <td>16150</td> <td>21750</td> <td>291</td> <td>0</td> <td>0</td> </tr> <tr class="toggler toggler1"> <td><a href="#">lighthouse+0_0_0_0_0_0_0_0_0.html</a></td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>12</td> <td>23</td> <td>67</td> <td>100</td> <td>4420</td> <td>4420</td> <td>15360</td> <td>16150</td> <td>21750</td> <td>291</td> <td>0</td> <td>0</td> </tr> <tr class="toggler toggler1"> <td><a href="#">lighthouse+0_0_0_0_0_0_0_0_0.html</a></td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>12</td> <td>23</td> <td>67</td> <td>100</td> <td>4420</td> <td>4420</td> <td>15360</td> <td>16150</td> <td>21750</td> <td>291</td> <td>0</td> <td>0</td> </tr> <tr class="toggler toggler1"> <td><a href="#">lighthouse+0_0_0_0_0_0_0_0_0.html</a></td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>12</td> <td>23</td> <td>67</td> <td>100</td> <td>4420</td> <td>4420</td> <td>15360</td> <td>16150</td> <td>21750</td> <td>291</td> <td>0</td> <td>0</td> </tr> <tr class="toggler toggler1"> <td><a href="#">lighthouse+0_0_0_0_0_0_0_0_0.html</a></td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>12</td> <td>23</td> <td>67</td> <td>100</td> <td>4420</td> <td>4420</td> <td>15360</td> <td>16150</td> <td>21750</td> <td>291</td> <td>0</td> <td>0</td> </tr> </tbody> <tbody> <tr> <td colspan="20" class="page-header"><button type="button" class="tbtn"><i class="fa fa-plus-circle"></i>   P_index 2</button></td> </tr> <tr class="toggler"> <td rowspan="11"></td> <td><a href="#">lighthouse+0_0_0_0_0_0_0_0_0.html</a></td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>12</td> <td>23</td> <td>67</td> <td>100</td> <td>4420</td> <td>4420</td> <td>15360</td> <td>16150</td> <td>21750</td> <td>291</td> <td>0</td> <td>0</td> </tr> <tr class="toggler"> <td><a href="#">lighthouse+0_0_0_0_0_0_0_0_0.html</a></td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>12</td> <td>23</td> <td>67</td> <td>100</td> <td>4420</td> <td>4420</td> <td>15360</td> <td>16150</td> <td>21750</td> <td>291</td> <td>0</td> <td>0</td> </tr> <tr class="toggler"> <td><a href="#">lighthouse+0_0_0_0_0_0_0_0_0.html</a></td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>12</td> <td>23</td> <td>67</td> <td>100</td> <td>4420</td> <td>4420</td> <td>15360</td> <td>16150</td> <td>21750</td> <td>291</td> <td>0</td> <td>0</td> </tr> <tr class="toggler"> <td><a href="#">lighthouse+0_0_0_0_0_0_0_0_0.html</a></td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>12</td> <td>23</td> <td>67</td> <td>100</td> <td>4420</td> <td>4420</td> <td>15360</td> <td>16150</td> <td>21750</td> <td>291</td> <td>0</td> <td>0</td> </tr> <tr class="toggler"> <td><a href="#">lighthouse+0_0_0_0_0_0_0_0_0.html</a></td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>12</td> <td>23</td> <td>67</td> <td>100</td> <td>4420</td> <td>4420</td> <td>15360</td> <td>16150</td> <td>21750</td> <td>291</td> <td>0</td> <td>0</td> </tr> <tr class="toggler"> <td><a href="#">lighthouse+0_0_0_0_0_0_0_0_0.html</a></td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>12</td> <td>23</td> <td>67</td> <td>100</td> <td>4420</td> <td>4420</td> <td>15360</td> <td>16150</td> <td>21750</td> <td>291</td> <td>0</td> <td>0</td> </tr> <tr class="toggler"> <td><a href="#">lighthouse+0_0_0_0_0_0_0_0_0.html</a></td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>12</td> <td>23</td> <td>67</td> <td>100</td> <td>4420</td> <td>4420</td> <td>15360</td> <td>16150</td> <td>21750</td> <td>291</td> <td>0</td> <td>0</td> </tr> <tr class="toggler"> <td><a href="#">lighthouse+0_0_0_0_0_0_0_0_0.html</a></td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>12</td> <td>23</td> <td>67</td> <td>100</td> <td>4420</td> <td>4420</td> <td>15360</td> <td>16150</td> <td>21750</td> <td>291</td> <td>0</td> <td>0</td> </tr> <tr class="toggler"> <td><a href="#">lighthouse+0_0_0_0_0_0_0_0_0.html</a></td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>12</td> <td>23</td> <td>67</td> <td>100</td> <td>4420</td> <td>4420</td> <td>15360</td> <td>16150</td> <td>21750</td> <td>291</td> <td>0</td> <td>0</td> </tr> <tr class="toggler"> <td><a href="#">lighthouse+0_0_0_0_0_0_0_0_0.html</a></td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>12</td> <td>23</td> <td>67</td> <td>100</td> <td>4420</td> <td>4420</td> <td>15360</td> <td>16150</td> <td>21750</td> <td>291</td> <td>0</td> <td>0</td> </tr> <tr class="toggler"> <td><a href="#">lighthouse+0_0_0_0_0_0_0_0_0.html</a></td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>12</td> <td>23</td> <td>67</td> <td>100</td> <td>4420</td> <td>4420</td> <td>15360</td> <td>16150</td> <td>21750</td> <td>291</td> <td>0</td> <td>0</td> </tr> </tbody> <tbody> <tr> <td colspan="20" class="page-header"><button type="button" class="tbtn"><i class="fa fa-plus-circle"></i>   P_index 3</button></td> </tr> <tr class="toggler"> <td rowspan="5"></td> <td><a href="#">lighthouse+0_0_0_0_0_0_0_0_0.html</a></td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>12</td> <td>23</td> <td>67</td> <td>100</td> <td>4420</td> <td>4420</td> <td>15360</td> <td>16150</td> <td>21750</td> <td>291</td> <td>0</td> <td>0</td> </tr> <tr class="toggler"> <td><a href="#">lighthouse+0_0_0_0_0_0_0_0_0.html</a></td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>12</td> <td>23</td> <td>67</td> <td>100</td> <td>4420</td> <td>4420</td> <td>15360</td> <td>16150</td> <td>21750</td> <td>291</td> <td>0</td> <td>0</td> </tr> <tr class="toggler"> <td><a href="#">lighthouse+0_0_0_0_0_0_0_0_0.html</a></td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>12</td> <td>23</td> <td>67</td> <td>100</td> <td>4420</td> <td>4420</td> <td>15360</td> <td>16150</td> <td>21750</td> <td>291</td> <td>0</td> <td>0</td> </tr> <tr class="toggler"> <td><a href="#">lighthouse+0_0_0_0_0_0_0_0_0.html</a></td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>12</td> <td>23</td> <td>67</td> <td>100</td> <td>4420</td> <td>4420</td> <td>15360</td> <td>16150</td> <td>21750</td> <td>291</td> <td>0</td> <td>0</td> </tr> <tr class="toggler"> <td><a href="#">lighthouse+0_0_0_0_0_0_0_0_0.html</a></td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>12</td> <td>23</td> <td>67</td> <td>100</td> <td>4420</td> <td>4420</td> <td>15360</td> <td>16150</td> <td>21750</td> <td>291</td> <td>0</td> <td>0</td> </tr> </tbody> <tbody> <tr> <td colspan="20" class="page-header"><button type="button" class="tbtn"><i class="fa fa-plus-circle"></i>   P_index 4</button></td> </tr> <tr class="toggler"> <td rowspan="2"></td> <td><a href="#">lighthouse+0_0_0_0_0_0_0_0_0.html</a></td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>12</td> <td>23</td> <td>67</td> <td>100</td> <td>4420</td> <td>4420</td> <td>15360</td> <td>16150</td> <td>21750</td> <td>291</td> <td>0</td> <td>0</td> </tr> <tr class="toggler"> <td><a href="#">lighthouse+0_0_0_0_0_0_0_0_0.html</a></td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>12</td> <td>23</td> <td>67</td> <td>100</td> <td>4420</td> <td>4420</td> <td>15360</td> <td>16150</td> <td>21750</td> <td>291</td> <td>0</td> <td>0</td> </tr> </tbody> </table> </div>

.custom-table{border-collapse:collapse;width:100%;border:solid 1px #c0c0c0;font-family:open sans;font-size:11px} .custom-table th,.custom-table td{text-align:left;padding:8px;border:solid 1px #c0c0c0} .custom-table th{color:#000080} .custom-table tr:nth-child(odd){background-color:#f7f7ff} .custom-table>thead>tr{background-color:#dde8f7!important} .tbtn{border:0;outline:0;background-color:transparent;font-size:13px;cursor:pointer} .toggler{display:none} .toggler1{display:table-row;} .custom-table a{color: #0033cc;} .custom-table a:hover{color: #f00;} .page-header{background-color: #eee;}

$(document).ready(function () { $(".tbtn").click(function () { $(this).parents(".custom-table").find(".toggler1").removeClass("toggler1"); $(this).parents("tbody").find(".toggler").addClass("toggler1"); $(this).parents(".custom-table").find(".fa-minus-circle").removeClass("fa-minus-circle"); $(this).parents("tbody").find(".fa-plus-circle").addClass("fa-minus-circle"); }); });