jQuery menu help

I have an idea for compressing a large menu where at a certain point I’d like to apply a class to list items and make them collapse and expand on click. For example consider the following:

News

  • item1
  • item2
  • item3

As the menu stands if I click on item1 I will see the child links and its parents siblings:

News

  • item1
    child1
    child2
    child3
  • item2
  • item3

Using jQuery how could I “hide” the links for item2 and item3 behind an expander?

News

  • item1
    child1
    child2
    child3
  • more news (when expanded shows item2, item3)

The menu is generated dynamically by a CMS so I can apply classes to the list items at any time if necessary.

Treeview
http://jquery.bassistance.de/treeview/demo/

That’s not quite what I want, though maybe can fit? Where those examples don’t meet my needs are once you’ve clicked on the first link and the child links are showing. At this point I want the parent siblings ie link2, link3 etc to be hidden and only accessible by clicking a “more” type link.

That then sounds more like an accordion menu.

http://jquery.bassistance.de/accordion/demo/

However, feel free to also have a dig around the web sites of Stu Nicholls.
he specialises in CSS and JavaScript menus.

CSS Menus: http://www.cssmenus.co.uk/
JavaScript Menus: http://www.stunicholls.com/menu/index.html

For example: Professional Concertina Slide #2

I’ve sort of got this figured but it’s not quite working. For an expander typically you have to wrap the portion with a div preceded by a toggle link. My problem here is the elements I want to hide are part of an unordered list so inserting a div would be invalid markup.

My alternative might be to add a class to these list items and then using jQuery, at run add the necessary mark up for it to validate eg:


<ul>
   <li>item 1
   <ul>
     <li>child1</li>
   </ul>
</li>
<li>item 2</li>
<li>item 3</li>
</ul>

becomes


 <ul>
   <li>item 1
   <ul>
     <li>child1</li>
   </ul>
 </li>
</ul>
<a id="toggle" href="#">show more</a>
<ul id="show">
 <li class="hide">item 2</li>
 <li class="hide">item 3</li>
</ul>
 

So dynamically the anchor and the ul with id=“show” is added via jQuery. Only problem with that is the original </ul> needs to close earlier.