Toggle the

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...

unfortunately, you cannot modify `tr` elements like this unless you change their `display` property... but I wouldn't recommend this ;-) — ahren, Aug 08 '12 at 00:50
I agree with @ahren, and furthermore `.click()` isn't a good practice, you should use `.on('click')` instead. Did you realize there is a missing semi-colon on JQuery statement? — waldyr.ar, Aug 08 '12 at 00:55
The jQuery documentation (http://api.jquery.com/on/) says there is no difference between .Click() and .on('click') http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click — Prisoner ZERO, Aug 08 '12 at 01:08
What 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, Item 3 rows.. — I'll-Be-Back, Aug 08 '12 at 01:08

score 1 · Answer 1 · answered Aug 08 '12 at 01:13

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";
    });
});

answered Aug 08 '12 at 01:13

Niet the Dark Absol

320,036
81
464
592

Heather Gaye · Accepted Answer · 2012-08-08T01:47:03.780

1

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();
    });
});

edited Aug 08 '12 at 01:47

answered Aug 08 '12 at 01:15

Heather Gaye

1,118
1
11
19

Thanks ...that seem to work.. Just last question - if any tr have 'order' class name then don't hide it.. How to do this? – I'll-Be-Back Aug 08 '12 at 01:26
Example: `if (!$(this).hasClass('order')) { }` – I'll-Be-Back Aug 08 '12 at 01:34
Oh, I got it to work `$(this).nextUntil('.sub-title').not('order').toggle();` – I'll-Be-Back Aug 08 '12 at 01:37

Toggle the

2 Answers2