Hide/show table rows with a specific class until another row with a different class name?

Question

I have rows I want to show and hide, but only up until the next first-level row. My code is toggling all of the second-level rows instead of the ones up until the next first-level row.

When you click on a row with the class "first-level", I would like every row with the class "second-level" up until the next instance of "first-level" to toggle.

http://jsfiddle.net/a837tc24/

<table>
  <tbody>
    <tr class="first-level">
      <td>First Level</td>
      <td>First Level</td>
      <td>First Level</td>
      <td>First Level</td>
      <td>First Level</td>
    </tr>
    <tr class="second-level">
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
    </tr>
    <tr class="second-level">
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
    </tr>
    <tr class="second-level">
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
    </tr>
    <tr class="first-level">
      <td>First Level</td>
      <td>First Level</td>
      <td>First Level</td>
      <td>First Level</td>
      <td>First Level</td>
    </tr>
    <tr class="second-level">
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
    </tr>
    <tr class="second-level">
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
    </tr>
    <tr class="second-level">
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
      <td>Second Level</td>
    </tr>
  </tbody>
</table>

js:

var firstLevel = $('.first-level')
var secondLevel = $('.second-level')

$(firstLevel).click(function() {
    $(secondLevel).nextUntil(firstLevel).toggle("slow");
});

Adam remark is important, better use ids in this situation IMHO — Adib Aroui, Oct 08 '15 at 23:45
I tried to clarify what I'm trying to do in my original post, hopefully that helps. When a row with .first-level is clicked, I want to show the rows with .second-level, but only up until the next instance of .first-level. — talena6, Oct 08 '15 at 23:59

score 1 · Accepted Answer · answered Oct 09 '15 at 00:04

1

You need to start at the element clicked:

$('.first-level').click(function() {
    $(this).nextUntil('.first-level').toggle("slow");       
});

Passing in the whole collection just won't work as there is no single point of reference to start from

DEMO

answered Oct 09 '15 at 00:04

charlietfl

170,828
13
121
150

Hide/show table rows with a specific class until another row with a different class name?

1 Answers1

Linked