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.
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.
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: