Class-Based JQuery Collapse Table Cells

Question

Hi, I have a strcture table for my menu, and I need to be able to collapse / expand the menu from level2 so that all cells of level3 become visible. My HTML is as follows:

<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 am I, when I click the level2 element, I only compress / expand the level3 elements after the level 2 that I clicked? I want to do this only for level 2, not for level 1.

Answer 1

Have you considered using nested lists for menus? This not only makes your task easier, but it is also a “better” structure (Keyword: layouts without tables).

Answer 2

:

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

, level3, , level2, . HTML- , level3 level2.

Answer 3

I would suggest you use the jquery tree plugin

http://www.jstree.com/

Answer 4

Not sure if I understood correctly, but try to take a look at the next Annimated Collapse JQuery plugin.

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