JSFiddle - React, Tailwind, and code Playground

by pravinnavle

HTML

<html>
<body>
<table class='imagetable' align='center'><caption><b></b></caption>
<tbody class="labels"><tr><td class='expandFRED' colspan='7'>Values 1 (click here to expand/collapse)
</td></tr></tbody>
<tbody class="hide">
<tr>
<td class='expandSUB1 expandVALS'>Category 1 (click here to expand/collapse)    
</td>
<td class='expandSUB1'></td><td class='expandSUB1' align='right'>$461.11
</td><td class='expandSUB1'></td><td class='expandSUB1' align='right'>$428.33</td>
<td class='expandSUB1' align='right'>-7.11%
</td>
<td class='expandSUB1' align='right'>$-32.78</td>
</tr>
<tr>
<td class='expandCAT1'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SubValue 1</td>
<td class='expandCAT1' align='right'>0.405582</td>
<td class='expandCAT1'></td>
<td class='expandCAT1' align='right'>0.405582</td>
<td class='expandCAT1'></td>
<td class='expandCAT1'></td>
<td class='expandCAT1'></td>
</tr>
<tr>
<td class='expandCAT1'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SubValue 2</td>
<td class='expandCAT1' align='right'>1</td>
<td class='expandCAT1'></td>
<td class='expandCAT1' align='right'>1</td>
<td class='expandCAT1'></td>
<td class='expandCAT1'></td>
<td class='expandCAT1'></td>
</tr>
<tr>
<td class='expandCAT1'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SubValue 3</td>
<td class='expandCAT1' align='right'>1.392379</td>
<td class='expandCAT1'></td>
<td class='expandCAT1' align='right'>1.407569</td>
<td class='expandCAT1'></td>
<td class='expandCAT1'></td>
<td class='expandCAT1'></td>
</tr>
</tbody>
</table>
</body>
</html>

CSS

.label tr td label {
display: block;
}
[data-toggle='toggle'] {
display: none;
}
.expandSUB1 { display: none;
}
.{ display: none;
}
.expandCAT1 { display: none;
}

JavaScript

$(document).ready(function() {
$('[data-toggle="toggle"]').change(function(){
$(this).parents().next('.hide').toggle();
});
});

$(document).ready(function(){
$(".expandFRED").click(function(){
$(".expandSUB1").toggle();
});    
$(".expandVALS").click(function(){
$(".expandCAT1").toggle();
}); 
})