Back to Top

How to Accordion Menu with Modx

Modx, a popular content Management Framework which comes with a vast directory of useful packages.Wayfinder is a Snippet basically used to create navigational menus in Modx.

So I am going to write a detailed tutorial about the vertical accordion menu in Modx Revolution with the use of Wayfinder package. You just need to follow very simple steps to create your accordion menu in Modx.

So, Here are the detailed steps:

Also Read: Execute Custom Query IN MODx

Step 1:

Let’s start with the Wayfinder code, Here we call Wayfinder snippet for displaying menu.To place below code into the template.

Step 2:

Now it is time to call JavaScript which is very useful to create an accordion effect with the menu.To add Javascript code, create one new chunk with the name ‘wfJS’ and add below code in it.

Step 3:

Next is to implement CSS.To use CSS create one more chunk with title ‘wfCss’ and place below code in it.

Must Read: Execute Custom Query IN MODx

When We have successfully done the above steps, It’s time to see it in action.I hope you have learned a bit and don’t forget to write your valuable comments.

Thanks for reading and feel free to share your thoughts! Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

The Readers’ Poll – August 2012

Posted on 6 years ago


MySQL Transaction tutorial for Beginners

Posted on 6 years ago


Control Flow Functions in MySQL

Posted on 3 years ago


The Readers’ Poll – June 2012

Posted on 6 years ago