selector help with collapsable table rows
hi guys,
Im making a table that has collapsable/expandable rows and im having a bit of trouble.
i started using the code from this site
http://www.jankoatwarpspeed.com/post/20 ... lugin.aspx
but where as this one has one row which is clickable to reveal the one underneath it, i need to reveal the next 2 underneath.
my table looks like this:
-
<table id='expandable'>
<!-- clickable row that revels the two rows below -->
<tr class='master'>
<td><div class="arrow"></div></td>
<td class='event'>Student Warehouse</td>
<td>Fri 04/03/09</td>
</tr>
<tr class='sub'>
<td></td>
<td>Early Bird</td>
<td>Close @ 21:00 <br /></td>
</tr>
<tr class='sub'>
<td></td>
<td>Normal</td>
<td>Close @ 21:00 <br /></td>
</tr>
<!-- clickable row that revels the two rows below -->
<tr class='master'>
<td><div class="arrow"></div></td>
<td class='event'>Fruity Tuesdays</td>
<td>Fri 04/03/09</td>
</tr>
<tr class='sub'>
<td></td>
<td>Early Bird</td>
<td>Close @ 21:00 <br /></td>
</tr>
<tr class='sub'>
<td></td>
<td>Normal</td>
<td>Close @ 21:00 <br /></td>
</tr>
</table>
I was using this jquery (you can ignore the striped stuff - thats another problem ha)...
-
$("#expandable tr.master").addClass("master");
$("#expandable tr:not(.master)").hide();
$("#expandable tr:first-child").show();
$("#expandable tr.master").click(function(){
$(this).next('.sub').toggle();
$(this).next("tr").addClass("striped");
$(this).find(".arrow").toggleClass("up");
});
... but this only reveals the first hidden row for the one i clicked. i need both to toggle. im new to jquery so havent mastered the selectors yet.