FREE Accordion Menu Joomla
Compatible with: 2.5 3.0+
Preview Download

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

  1. Anil V. Chaudhary 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

    • extension developer
      Admin Reply

      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 Reply

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

    • extension developer
      Admin Reply

      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.

      • Elena Reply

        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.

        • extension developer
          Admin Reply

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

  2. S Reply


    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!

  3. Simone Reply


    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.

    • extension developer
      Admin Reply

      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.

      • extension developer
        Admin Reply

        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.

  4. Greko2009 Reply

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

    • extension developer
      Admin Reply

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

  5. michael Reply

    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.

    • extension developer
      Admin Reply

      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

  6. omar Reply

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

  7. Damian Reply

    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.


    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

  9. suvarna Reply

    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.

    • extension developer
      Admin Reply

      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.

  10. Alex Reply

    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!

    • extension developer
      Admin Reply

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

      • Alex Reply

        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.

        • extension developer
          Admin Reply

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

  11. Alex Reply

    Thanks for the fast reply!

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

  12. alex Reply

    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?

    • extension developer
      Admin Reply

      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.

  13. Slava Reply

    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!!

    • extension developer
      Admin Reply

      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.

  14. Slava Reply

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

  15. Joey Reply

    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.

  16. ega Reply

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

  17. Nikita Reply


    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!


    • extension developer
      Admin Reply

      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.

  18. Nikita Reply


    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!


    • extension developer
      Admin Reply

      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…

Leave a Comment

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>