FREE Accordion Menu Joomla

Preview Download 2.5 3.0+

If you would like to have a fancy navigation for your Joomla website, here you can download this amazing accordion menu for free. The menu animation is built with jQuery library. Before the module had pre-made skins included and I have decide to make it 100% customizable, so now users can edit the colors of menus and background and change the font style as well.

custom colors accordion menu joomla

Fonts are loaded from Google Font Directory, so if you would like to change the font style, you will have to type the name of the font in the appropriate field. For example if you want to use the open sans font, you will have to add it like this:


Please note that the “+” (plus) sign is required and small and uppercase characters are case sensitive.

For the bold version of this font style you will have to insert the following code:


If you have found a bug or have any idea on how I could improve this module, please leave a comment.


March 13, 2015 – added jQuery function to keep sub-menus expanded when parent menu is active

Anil V. Chaudhary November 10, 2012 Reply

Dear friend,

I have download the module Multi colored Free Accordion Menu for Joomla 2.5. I have insttaled the same on my website. The menu item having submenu is not getting recognized by the modules. it may the setting fault. Please visit my website . there is vertical menu “Menu”
The menu items like “Places to visit”, Article & books” and “Magazines”
are shown as plain text instead of menu items.

Please help me urgently as I liked this module very much.

Thanking you
Anil V. Chaudhary

    Hello Anil.
    As I see, you are using a template framework that already has accordion menu.
    I don’t see that you may using our module. Activate the module, so I can take a look.

    mohit k chaudhary March 20, 2015 Reply

    you r right but i suggest u other module for responsive menu u can use sj flat menu module

    You can do the following steps:
    1. Add this code to your website:
    #je_accord136.je_acc > ul > li > a:hover, #je_accord136.je_acc > ul > > a, #je_accord136.je_acc > ul > > a {
    background: #2195d3!important;
    color: #ffffff!important;
    2. Change the number “136” to your current module ID that can be found in the module manager, here is an example picture to find the module ID:
    how to find out accordion menu module ID in joomla
    3. Change the color codes as you want.

    The hovering and border colors are generated by the module, depending on what colors you choose in the module parameter. I thought it would be easier for users to chose the default colors and the rest to automatically be generated. Maybe I will change this in a future update if more users find it more convenient to be able to change every single color.

      Hello again! Sorry for the stupid question, but what file I need to add this code? In style.css in folder mod_je_accordion? I install your module, it works, I really like it, but I need a solution is the expansion of the menu by hover of the cursor. Module ID I prescribe correctly. But it still doesn’t work.
      Thanks in advance for your reply.

        Yes, you have to add the code to mod_je_accordion/css/style.css file. Sorry I was not specific on this.


Great extension! I enjoy it very much! And it’s free wow good job!
My one and only concern is how to make the child menus remain expanded when the parent menu is clicked on, please?

Thank you in advance and keep up the good job!


May I please ask you what should I do in order for the sub-menus to remain expanded when the parent menu is clicked on?

Thank you very much.

    Unfortunetly in the current version of the module it is not possible to have the parent menu opened. Will update the module in the coming days and will try to include this feature as well. Thank you for pointing it out.

      The module has been updated and now the sub menus will remain expanded when the parent menu is active, please download the new version and reinstall.

Greko2009 March 13, 2015 Reply

Unfortunately it doesn’t work at all. Tested it only with rockettheme templates.

    jQuery is loaded on your page? Do you have an online demo, maybe I can find out what the problem is.

Is it possible to embed video (IE: youtube iframe or via a Joomla plugin) in the ‘text’ area? I’ve tried both but it seems to either a) strip out the iframe tag even though other html tags work or b) doesn’t support plugins within the text area.

    I think you are referring to the content accordion module, that does not support iframes, just basic safe html. Here is a list of the supported tags:
    joomla safe html tags

how icant change the submenu colour its still white itry to change it from back-end but it dose not work

This is a really good free module, thank you! The Accordian is always open on the page load, is there a way that it is always closed on the initial page load? Thanks again.

BTECH INDONESIA April 15, 2015 Reply

Hi, thanks for great module. I just want to ask, is possible for accordion menu to close before they click or hover ? because i try this module in my website, and when i refresh the page, the accordion menu always open.

thanks again

I have a doubt. Whether the categories and articles created first (as we do for normal navigation menu), and then this module has to be installed? Because I need to position this menu in protostar template “position 1”, that is navigation main menu. Thanks in advance.

    You can install this module and add categories and articles after that. You will also have to create a menu category.
    In the module options you will find a field where you choose the menu you want to display. The module can be published to any position, in your case you can publish it to “position 1”. Basically the module works the same way like you would set up the core menu module, just has different styling and some extra features including the accordion animation.

This is a really awesome extension!

I have only one question: the menu does not stay open at the current item. Can you please look at my URL? Maybe I need to make an extra setting?

I am a Joomla newbie and would very much appreciate your help. Thank you!

    I think the problem here is with the main level menu. What type of menu is the parent menu for your product?

      Sorry, I made a mistake in my earlier reply. The parent menu for my product is menu heading (not separator).

      I checked now to be sure.

        That make sense, probably you should change it to “separator”, that may work, but not 100% sure.

Thanks for the fast reply!

A menu separator is the parent menu for my product. What can I change to make it work?

Hi, good extension!
I have only a problem… i use a very large menu structure (about 165 items and subitems) and the last 30 items are not styled… there are some limits?

    Have never tried with so many items, but there is no limitation in the module on how many items you can add. It could be, that some menu types are not styled properly, like separators, or other types that are not as frequently used. If there is an online demo to your site, I could tell you what the problem is with the unstyled menus.

hey bro, can the color of the item be changed when pointed at? so what i mean is tht the basic item in menu is color white and when u point at it, it has color yellow, for example, how do i do tht, pls answer!!

    Unfortunately this can’t be done in the current version, because the module uses a custom php function to generate the hover and active colors. I think that users can be overwhelmed with so many color options and choose to do it this way. So you set up four colors and all others are generated based on those.
    Also realize, that there is small bug in the module parameters, the main and sub-menus has the same name, so I changed that and updated the module.

how is it gonna appear in backstage options? do i have to reinstall the menu?

I tried your module using purity III template, positioning it to sidebar-1. The the problem is, sub-menu are not showing when there is an article created at the content.

hi man…when the page is first loaded, the last menu can bring up a sub menu


Thank you for the great extension! Can this menu work with many sub-levels? We are trying to build an online book with up to 4 sub-levels (such as chapter 1, 1.1., 1.1.1, and Would this extension support that many levels?

Also, is there an option (such as a button) for readers to “expand all”, should they desire to see the whole Table of Contents (i.e. The whole menu)?

Thank you very much!


    There is no option that allows the user to expand all the menus, however this is a great option to add in the next version.
    Yes the module support 4 levels of menus and also more.


Which jQuery version do you recommend? Will jQuery cause problem with MooTool, which I believe is automatically there in Joomla? Will the extension “jQuery++ Integrator” work?

I installed the JE Accordion menu and enabled it, but I couldn’t figure out how to apply it to the menu (it’s not listed in any of the options). It must be because I didn’t have jQuery? Or am I missing anything else?

Thank you very much!


    In the module configuration, you actually have to choose a menu category to show in the module. But first, you have to create those menus.
    The module will load the latest jQuery library, but it is disabled by default, because the latest Joomla version will also load a jQuery library, and loading it twice can cause conflicts.
    The modules should also work without having the library loaded, however the accordion animation will not work.
    Also, don’t forget to publish the module to all pages…

Thanks for the module. How can I make an option-all the time the menu and submenu is open? Thank you .

Join the Discussion!

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