Collapsible menu using wayfinder

I need to create a collapsible menu navigation with two levels. When you click on the first level, the second level appears, and when you click again, it returns to it’s original state. Also the second level links need a different visual treatment than the first level links. Is there a code out there or method for doing this with wayfinder? Most scripts I’ve found that achieve this collapsible effect utilize javascript and I’m unsure of how to implement javascript in conjunction with wayfinder.

Any help would be appreciated...I have only been working with modx for 3 days so far so am very new. So far I think it’s a great CMS, very powerful and flexible.

I’m no expert, but I use a collapsible menu as follows:

1. Make some chunks:

wfOuter with code =
<ul>

[+wf.wrapper+]
</ul>



wfInner with code =
<ul>
[+wf.wrapper+]
</ul>


wfRow with code:
<li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

2. Then add the menu to the css:
/*left menu */

#menu {
float: left;
clear: left;
width: 188px;
/*padding: 9px 6px 6px 6px;*/
padding: 6px 3px 3px 3px;
font-size: 0.9em;
overflow: hidden;
}
#menu ul {
margin: 3px 3px 0 0;
padding: 0 0 0 0;
text-transform: uppercase;
overflow: hidden;
}
#menu li {
margin: 0 0 0 0;

padding: 0 0 0 0;
list-style: none;
}
#menu li a {
display: block;
width: 100%;

border-bottom: 1px solid #cccccc;
padding: 3px 0 3px 0;
}
#menu a.here {
border-bottom: 1px dotted #8A2337;
}


#menu li ul {


list-style-image: url(bullet.gif);
list-style-position: outside;
margin: 0 0 0 26px;

}

#menu li ul li ul {
list-style-image: none;
list-style-position: outside;
margin: 0 0 0 20px;

}


#menu li ul li a {
padding: 3px 0 3px 0;

}
#menu li a:hover {
border-bottom: 1px solid #8A2337;

}


And finally,
3. In your template call the wayfinder with something like:
[!Wayfinder? &amp;startId=`[[UltimateParent]]` &outerTpl=`wfOuter` &innerTpl=`wfInner` &hereTpl=`wfRow` &hereClass=`menu` &amp;hideSubMenus=`true`!]

the Ultimateparent is not necessary but I use it in combination with a first level top menu



Hope this helps

Thank you! I will give it a shot.

thank you! good work! A little bit of styling and then the menu is perfect.

Maybe one should admit, that you have to put your documents in one container, so the menu is working for the whole site structure.
Like this
1. Container
1.1 Home
1.2 LALA
1.3 .....