MODx | Wayfinder - Nested jQuery Accordion

in the excellent MODx Wayfinder e-book by kongondo is a featured jQuery Accordion which uses a nice jQuery plugin by www.i-marco.nl.

Yesterday i found out, that the original plugin code has been updated, which now also allows nested accordions, as well as the support of panels (e.g. a div within the menu structure).
you can check the demos here: accordion demos

playing around with it, i managed to integrate the nested version in MODx which i will describe here.

1. download the files

2. extract the files and upload jquery-1.4.2.min.js & menu.js to your templates folder and reference both files in the header of your template. If you are already using jQuery on your site (check if your version is compatible), you only need to upload menu.js

3. i altered the styles.css files a bit to my needs, so either use the file from the downloaded .zip, or use mine, which you can download here. Reference it in your header, too.
// You can also integrate it in your other already existing stylesheets.

btw. this is how our nested accordion will look like:

4. create a Chunk "acc-folder" with the following code:

<li[+wf.classes+]>
   <a title="[+wf.title+]" href="#">[+wf.linktext+] »</a>
   [+wf.wrapper+]
</li>

5. and another Chunk "acc-inner":

<ul class="acitem">
   [+wf.wrapper+]
</ul>

6. Ressources that will be containers/folders in your menu, either need to have the "Link Attributes" field set to rel="category", or the template set to "blank":

7. finally place the Wayfinder call in your template:

[[Wayfinder? &startId=`0` &outerClass=`menu` &hereClass=`expand` &selfClass=`active` &categoryFoldersTpl=`acc-folder` &innerTpl=`acc-inner`]]

ta-daaa ... i guess that's it!

/////// *added*

to toggle the accordions (closing on a second click) do the following:

replace &outerClass=`menu` in your wayfinder call with &outerTpl=`acc-outer` and create a new chunk "acc-outer":

<ul class="menu collapsible">
   [+wf.wrapper+]
</ul>

and change the already existing chunk "acc-inner" to:

<ul class="acitem collapsible">
   [+wf.wrapper+]
</ul>

Tschounz

Reply #13 on : Mon December 19, 2011, 20:20:20

Hi there!
Has anyone figured out, how to do the thing, that quentin wanted to do??
I would be very interessted to the solution, cause i need it as well =)
Thx for your help!!
Tschounz

Quentin

Reply #12 on : Fri November 04, 2011, 18:12:12

Hi,

Great resource, simple and clear installation instructions, wish more websites were this useful and easy to use!

I want to change the accordian slightly so that clicking the active parent Opens/closes that panel, but clicking on any other Parent is a real link, not just opening/closing the container.

I figured I would need to combine the active class with the actitem collapsible, but am not 100% sure how to do it so a few pointers would be greatly appreciated.

Thanks,

Quentin

Howie

Reply #11 on : Sun July 10, 2011, 23:29:21

Ok it dropped the syntax in previous post- use double square bracket and drop rightmost plus sign in all syntax when using modx revo 2.0.8 and on

Howie

Reply #10 on : Sun July 10, 2011, 23:26:56

for modx revo 208 use this syntax

folder:
<li >
<a title="" href="#"> »</a>

</li>

inner:
<ul class="acitem">

</ul>

zvenson

Reply #9 on : Thu June 09, 2011, 14:46:12

Thank you very much for this great menu! But I have a strange problem with wayfinder when browsing the page on smartphones - i tried android and iphone - and on safari browser.

At first everything is working fine (for the first click) but my second click in the menu produces links like this:

mypage.com/click1.html (1.click)
mypage.com/click1/click2.html (2.click)
mypage.com/click1/click2/click3.html (3. click)

What could be the cause of this? Thank you for helping!

admin

Reply #8 on : Thu October 14, 2010, 19:18:48

Hi Gerdi,

that's how all JS-Accordions work.
You could either go with a non-js vertical menu, or find a way to load that page with Ajax

as for your other question, here's a Snippet to determine the level to get you started: http://bit.ly/drgYle

j

Gerdi

Reply #7 on : Wed October 13, 2010, 16:48:25

Is it also possible to open automatically a new page when clicking on a parent-item in this kind of accordion-menu? Or maybe open the first child-item of this parent-menu-item?

At the moment only the menu opens, but no content is loaded. Can I change this anywhere?

Thanks a lot!
Gerdi

admin

Reply #6 on : Thu October 07, 2010, 09:28:52

Hi Gerdi,

guess you could do this with "Wayfinder 2.5 beta" http://modxcms.com/forums/index.php/topic,33904.0.html which supports phx and got a level placeholder , or you write a Snippet and place it in your "&rowTpl"

j

Gerdi

Reply #5 on : Thu October 07, 2010, 02:09:53

Thanks a lot for this great work. One question: I want to make an output for the 3rd level containing a TV instead of the linktext, but this should only be for the 3rd level and not for level 1 and 2.

Do you have any idea how to do this?

Thanks a lot again!
Gerdi

Garth West

Reply #4 on : Tue September 21, 2010, 11:14:27

"acc-folder"
<li class=" activecolor">
<a title="" href="#"> »</a>

</li>

Garth West

Reply #3 on : Tue September 21, 2010, 11:12:28

Thanks sharkbait,

So my "acc-folder" looks like this now:
<li class=" activecolor">
<a title="" href="#"> »</a>

</li>
So my new class is .activecolor...now i'm just not too sure how to edit the css file.

Garth

admin

Reply #2 on : Mon September 20, 2010, 17:59:30

Hi Garth,

if you want to target resources that are containers specifically, you could add an extra class to it by changing the first part of the Chunk "acc-folder" to:
<li class="[ +wf.classnames+ ] yournewclass">
(remove the spaces before and after +)

hope i could help, j

Garth West

Reply #1 on : Mon September 20, 2010, 14:24:38

Thanks for the great work.

In the example above the accordion01>> background color is dark grey, same as the accordion03>>

My question is...How can i set accordion01,02,03 etc...whether they have children or not, to have a separate active state color

Example structure and colors:
Home (always 1st page of the site, active:#fff)
Strategy>> (active:#fff)
>>strategy01
>>strategy02
Case Studies (active:#fff)

I hope this is making sense

thanks a lot
Garth

Required fields are marked with *.