I came across a show/hide function that seemed promising for my issue, which I found here (credit to the original author). Inspired by this, I created a demonstration on JSFiddle (https://jsfiddle.net/q7sfeju9/). However, when attempting to show rows, it does not work as intended.
In the JSFiddle demo, if I first hide 'Level 1.2', followed by 'Level 1.1' and then 'Level 1', it works fine. But upon clicking 'Level 1' once more, only 'Level 1.1' and 'Level 1.2' should be displayed, not all sub-levels. Unfortunately, all levels and sub-levels are being shown instead. If any sub-levels are hidden, they should remain hidden until specifically clicked.
If anyone has a solution or guidance on how to achieve this behavior, I would greatly appreciate it.
Thank you in advance.
Update:
Please refer to the code snippet below -
$('tr').click(function(event) {
event.stopPropagation();
var currentLevel = parseInt($(this).attr('class')),
state = $(this).hasClass('hiding'),
nextEl = $(this).next(),
nextLevel = parseInt(nextEl.attr('class'));
while (currentLevel < nextLevel) {
nextEl.toggle(state);
nextEl = nextEl.next();
nextLevel = parseInt(nextEl.attr('class'));
}
$(this).toggleClass('hiding');
});
tr[class^="2"] td {
padding-left: 20px;
}
tr[class^="3"] td {
padding-left: 40px;
}
tr[class^="4"] td {
padding-left: 60px;
}
<table id="test">
<tr class="1">
<td>Level 1</td>
</tr>
<tr class="2">
<td>Level 1.1</td>
</tr>
<tr class="3">
<td>Level 1.1.1</td>
</tr>
<tr class="3">
<td>Level 1.1.2</td>
</tr>
<tr class="2">
<td>Level 1.2</td>
</tr>
<tr class="3">
<td>Level 1.2.1</td>
</tr>
<tr class="3">
<td>Level 1.2.2</td>
</tr>
<tr class="4">
<td>Level 1.2.2.1</td>
</tr>
<tr class="4">
<td>Level 1.2.2.1</td>
</tr>
<tr class="1">
<td>Level 2</td>
</tr>
<tr class="2">
<td>Level 2.1</td>
</tr>
<tr class="3">
<td>Level 2.1.1</td>
</tr>
<tr class="3">
<td>Level 2.1.2</td>
</tr>
</table>