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>

Showing comments 1 to 16 of 21 | Next | Last

Reply #21 on : Mon March 05, 2012, 14:01:31

hey Garth,

good to hear :)

j

Garth

Reply #20 on : Mon March 05, 2012, 13:53:44

Hi to worry j....got it sorted

ul.menu li {
margin-top: 1px;
list-style:none;

}

Garth

Anonymous

Reply #19 on : Mon March 05, 2012, 13:43:53

Hi j,

I tried that.
My Navigation:
#navigation ul {
float:left;
display:inline;
list-style:none;
padding-top:5px;
}

your stylesheet:
ul.menu, ul.menu ul {
list-style:none;
margin: 0;
padding: 0;
width: 200px;
}

Bullets still showing up :)

Garth

Reply #18 on : Mon March 05, 2012, 13:33:48

Hi Garth,

you tried "list-style: none;" on your list?

cheers, j

Garth

Reply #17 on : Mon March 05, 2012, 07:54:56

Hi There,

How do i remove the bullets? I've tried but cant seem to be able to figure it out.

Thanks
Garth

Eckhardt

Reply #16 on : Fri March 02, 2012, 21:07:28

Hello,

how can i check the accordion demo?

Tks for your help.

admin

Reply #15 on : Wed February 29, 2012, 11:08:54

Hi Garth,

I changed the download URL :)

cheers, j

Garth

Reply #14 on : Wed February 29, 2012, 10:30:16

Hi there,

The download link above does not work!
Please help :)

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

Required fields are marked with *.