I have a simple show/hide thing I'm working on, but I can't figure out
how to have the script show ALL the hidden rows up to the next
heading.
Here's how the simplified HTML looks:
<tr><td class="grouphead">Heading Text 1</td></tr>
<tr><td class="group">Group Item 1</td></tr>
<tr><td class="group">Group Item 2</td></tr>
<tr><td class="group">Group Item 3</td></tr>
<tr><td class="grouphead">Heading Text 2</td></tr>
<tr><td class="group">Group Item 1</td></tr>
<tr><td class="group">Group Item 2</td></tr>
<tr><td class="group">Group Item 3</td></tr>
The JS doing the show/hide:
$('td.group').parent('tr').hide();
$('td.grouphead').parent('tr').click(function() {
$(this).next().toggle('fast');
});
Unfortunately, for the real-world situation, I cannot use lists like I
normally do because of multiple columns. The example shows only one
column for sake of simplifying.
Basically, the script works, but it only shows the "next" <TR> and
fails to reveal the remaining <TR>'s.
What I'd like to learn is how to make it so that clicking on HEADING
TEXT 1 would reveal not just GROUP ITEM 1, but items 2 and 3 as well,
without revealing all the other group items not associated with
HEADING TEXT 1.
Did that make sense?
