Skip to content

Instantly share code, notes, and snippets.

@Kcko
Last active April 10, 2018 08:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Kcko/d10bbc4deb343db7029527a8cd8f9ef2 to your computer and use it in GitHub Desktop.
Save Kcko/d10bbc4deb343db7029527a8cd8f9ef2 to your computer and use it in GitHub Desktop.
.parent {
color: green;
}
.child {
color: blue;
}
<table id="mytable">
<tbody>
<tr class="parent" data-level="0">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr class="parent" data-level="1">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr class="child" data-level="2">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr class="child" data-level="2">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr class="child" data-level="2">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr class="parent" data-level="1">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr class="child" data-level="2">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr class="parent" data-level="1">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr class="child" data-level="2">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
<tr class="child" data-level="2">
<td>Cash and Equivalents</td>
<td>000,000</td>
<td>000,000</td>
</tr>
</tbody>
</table>
$(document).ready(function() {
function getChildren($row) {
var children = [], level = $row.attr('data-level');
while($row.next().attr('data-level') > level) {
children.push($row.next());
$row = $row.next();
}
return children;
}
$('.parent').on('click', function() {
var children = getChildren($(this));
$.each(children, function() {
$(this).toggle();
})
});
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment