jacklondon jacklondon - 3 months ago 18
CSS Question

toggleClass not keeping previous click event jquery

I found a show/hide function here (not my work but similar my problem) and based on that I have created a fiddle demo (https://jsfiddle.net/q7sfeju9/), but it is not working correctly when clicking to show the rows.

In fiddle, if I hide the

Level 1.2
first, then
Level 1.1
and last
Level 1
, working fine. Now, if I click the
Level 1
again, it should show only the
Level 1.1
and
Level 1.2
, not there all sub level. But it is showing all levels and sub levels. If I hide any sub levels, I need those levels should hide until clicked.

Please someone can help me how can I do this.

Thanks in advance

Update:

Please see the code 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>




Answer

You need to check what state are the children and use if/else to toggle them when appropriate.

Does the following have the desired behaviour? As I understand it, when a level is expanded, only direct sublevels should be shown.

CODE SNIPPET

    $('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();
    nextEl = nextEl.next();
    nextLevel = parseInt(nextEl.attr('class'));
  }
  $(this).toggleClass('hiding');
  hideChildren()
});

// the below function ensures that the children of the previously clicked row remain hidden
function hideChildren() {
$(".hiding").each( function() {
var currentLevel = parseInt($(this).attr('class')),
nextEl = $(this).next(),
    nextLevel = parseInt(nextEl.attr('class'));
  while (currentLevel < nextLevel ) {
      nextEl.hide();
    nextEl = nextEl.next();
    nextLevel = parseInt(nextEl.attr('class'));
  }
})
}
tr[class^="2"] td {
  padding-left: 20px;
}
tr[class^="3"] td {
  padding-left: 40px;
}
tr[class^="4"] td {
  padding-left: 60px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <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>

EDIT: Corrected behaviour according to OP's clarification. I admit, not the most beautiful code I've written, but it works.