JSFiddle - React, Tailwind, and code Playground
HTML
<table id="mytable">
<tbody>
<tr class="parent">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr class="child">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr class="child">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr class="child">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr class="parent">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr class="child">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr class="child">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr class="parent">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr class="child">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr class="child">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
</tbody>
</table>
CSS
.parent {
color: green;
}
.child {
color: blue;
}
JavaScript
$(document).ready(function() {
function getChildren($row) {
var children = [];
while($row.next().hasClass('child')) {
children.push($row.next());
$row = $row.next();
}
return children;
}
$('.parent').on('click', function() {
var children = getChildren($(this));
$.each(children, function() {
$(this).toggle();
})
});
})