Toggle the <TR>

Question

I am trying to do hide the belonging rows. For example if you click on 'Sub Title 1' which will then hide Item 1, Item 2 and Item 3 rows only.

Example:

<table border="1">
 <tbody>
  <tr class="head">
   <td> title </td>
  </tr>
  <tr class="sub-title">
     <td>Sub Title 1</td>
  </tr>
   <tr> <td>Item 1</td> </tr>
   <tr> <td>Item 2</td> </tr>
   <tr> <td>Item 3</td> </tr>
   <tr class="sub-title">
     <td>Sub Title 2</td>
   </tr>
   <tr> <td>Item 4</td> </tr>
   <tr> <td>Item 5</td> </tr>
   <tr> <td>Item 6</td> </tr>
  </tbody>
</table>

-

$('.sub-title').click( function() {
    $(this).parent().nextUntil('.sub-title').toggle();
})

It doesn't seem to work...

Answer 1

You have to toggle manually:

$(".sub-title").on("click",function() {
    $(this).nextUntil(".sub-title").each(function() {
        this.style.display = this.style.display == "none" ? "" : "none";
    });
});

Answer 2

nextUntil selects for siblings, not children. Remove the "parent" from your call.

Edited to respond to further question about excluding some rows based on class. Obviously you can also accommodate Kolink's response about preventing toggle's "display: block" overwriting the default "display: table-row", but as long as you test in all supported browsers, I don't see any problem with using toggle.

$('.sub-title').click( function() {
   $(this).nextUntil('.sub-title').each(function() {
        if (!$(this).hasClass('order')) 
            $(this).toggle();
    });
});