JSFiddle - React, Tailwind, and code Playground

by gdicerbo

HTML

<table style="font-size: .85em; width:750px; text-align: center; margin-left: 50px;">
<tr class ="header program">
  <th style="width:6%;"></th>
  <th style="text-align: center; width: 175px;">Transportation</th>
  <th style="text-align: center; width: 110px;">Energy Efficiency</th>
  <th style="text-align: center; width: 175px;">Renewable Energy</th>
</tr>
<tr class ="header hover">
  <td style="text-align: right;">FY17 Q2</td>
  <td>3/3 Met</td>
  <td>3/4 Met</td>
  <td>5/7 Met</td>
</tr>
     <tr><td>Program</td>
         <td>BETO 0/1 Met</td>
         <td>AMO 1/1 Met</td>
     </tr>
<tr class ="header hover">
  <td style="text-align: right;">FY17 Q1</td>
  <td>5/7 Met</td>
  <td>3/4 Met</td>
  <td>5/7 Met</td>
</tr>
<tr class ="header hover">
  <td style="text-align: right;">FY16 Q4</td>
  <td>3/3 Met</td>
  <td>4/4 Met</td>
  <td>6/6 Met</td>
</tr>
<tr class ="header hover">
  <td style="text-align: right;">FY16 Q3</td>
  <td>2/3 Met</td>
  <td>4/4 Met</td>
  <td>4/7 Met</td>
</tr>
</table>

CSS

tr {display: none;}

tr.header {display: table-row;

}
tr {cursor: pointer;}

th {cursor: default;}

.hover:hover {
    background-color: #d6ecc5;
}

JavaScript

$('tr.header').click(function(){
    $(this).nextUntil('tr.header').css('display', function(i,v){
        return this.style.display === 'table-row' ? 'none' : 'table-row';
    });
});