JSFiddle - React, Tailwind, and code Playground
by navindian
HTML
<table style="width: 100%">
<tr>
<th style="width: 305px"> </th>
<td>P10W1</td>
<td>P10W2</td>
<td>P10W3</td>
<td>P10W4</td>
<td>P10W5</td>
<td>P11W1</td>
<td>P11W2</td>
</tr>
<tr>
<td style="width: 305px"> </td>
<td>W41</td>
<td>W42</td>
<td>W43</td>
<td>W44</td>
<td>W45</td>
<td>W46</td>
<td>W47</td>
</tr>
<tr>
<td style="width: 305px"> </td>
<td>07/01</td>
<td>07/08</td>
<td>07/015</td>
<td>07/22</td>
<td>07/29</td>
<td>08/05</td>
<td>08/12</td>
</tr>
<tr>
<td style="width: 305px">Queue Type ID</td>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td style="width: 305px">Baseline Contacts</td>
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<th style="width: 305px" class="showme" id="Contacts"><strong>Contacts</strong>
</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="width: 305px" class="Contacts">Contacts Offered</td>
<td class="Contacts">0</td>
<td class="Contacts">1</td>
<td class="Contacts">2</td>
<td class="Contacts">3</td>
<td class="Contacts">4</td>
<td class="Contacts">6</td>
<td class="Contacts">7</td>
</tr>
<tr>
<td style="width: 305px" class="Contacts">Contacts Handled</td>
<td class="Contacts">0</td>
<td class="Contacts">1</td>
<td class="Contacts">2</td>
<td class="Contacts">3</td>
<td class="Contacts">4</td>
...
CSS
strong{
background-color:gray
}
JavaScript
$('th').click().toggle(function () {
var identifier = $(this).attr('id');
var selector = '.' + identifier;
$(selector).toggle();
}, function () {
});