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

AngularJS Routing Using UI-Router

Posted on 3 years ago


The Reader’s Poll – June 2015

Posted on 3 years ago


How to get Current URL in WordPress?

Posted on 5 years ago


How to Add Tag in WordPress

Posted on 6 years ago