JQuery collapse table cells based on class

Question

Hi i have a table strcture for my menu, and i need to be able to collapse/expand the menu from level2, so that all level3 cells becone visible. My HTML is like this:

<table>
<tr><td class="level1"><a href="abc.html">First Item</a></td></tr>
<tr><td class="level2"><a href="def.html">SecondItem</a></td></tr>
<tr><td class="level3"><a href="ghi.html">Third Item</a></td></tr>
<tr><td class="level3"><a href="jkl.html">Fourth Item</a></td></tr>
<tr><td class="level3"><a href="mno.html">Fifth Item</a></td></tr>
<tr><td class="level2"><a href="pqr.html">Sixth Item</a></td></tr>
<tr><td class="level2"><a href="stu.html">Seventh Item</a></td></tr>
</table>

How do i, when i press the level2 item i only collapse/expand the level3 items following the level2 i pushed? I only want to do this for level2, not for level 1.

Answer 1

You can try this:

$(".level2").click(function(){
  $(this).siblings('.level3').toggle();
});

This is somewhat problematic because this would trigger ALL level3 items, not just the ones below the level2 item that was clicked. The HTML needs to be altered in a way that level3 items are descendants of a level2 item.

Answer 2

Have you considered using nested lists for the menu? Not only does it make you task easier, but also is the "better" structure (Keyword: tableless layouts).

Answer 3

I would suggest you to use the jquery tree plugin

http://www.jstree.com/

Answer 4

Not sure if I understood correctly, but try having a look at the following Annimated Collapse plugin JQuery.

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm