Collapsing table rows in other tables?
I've got a series of nested tables with data that look someting like this...
<table>
<tr><td>
<table>
<tr class="ItemHeading"><td>Item Heading (always Visible) /td></tr>
<tr class="ItemDetail"><td>Item Detail (collapsible)</td></tr>
</table>
</td></tr>
<tr><td>
<table>
<tr class="ItemHeading"><td>Item Heading (always Visible)</td></tr>
<tr class="ItemDetail"><td>Item Detail (collapsible)</td></tr>
</table>
</td></tr>
<tr><td>
<table>
<tr class="ItemHeading"><td>Item Heading (always Visible)</td></tr>
<tr class="ItemDetail"><td>Item Detail (collapsible)</td></tr>
</table>
</td></tr>
</table>
I'd like to start with a collapsed table showing only the ItemHeading rows of each sub-table. When hovering over an ItemHeading, I'd like to expand that ItemDetail row and collapse any others, if they're open.
I'm using this jQuery code and am close, but not quite there...
-
$(document).ready(function(){
$(".ItemHeading").hover(function(){
$(this).next(".ItemDetail").slideToggle("slow").siblings(".ItemDetail:visible").slideUp("slow");
$(this).siblings(".ItemHeading").removeClass("active");
$(this).toggleClass("active");
});
});
Any thoughts?