Themeforest

Wordpress Plugin – jQuery Vertical Accordion Menu

Updated: 18th January 2012

This plugin allows you to easily create multiple jquery vertical accordion menus using the custom menus function, available in Wordpress 3.0.

The accordion menu can handle any number of sub-menus and features include the option to select either “hover” or “click” to activate the menu, add a count showing the number of links under each menu item & auto-expand menu based on the current page.

Also Check Out Our Premium WordPress Plugins:

Demo Accordion Menu

Demo – WordPress Vertical Accordion Menu Plugin

Download The Plugin

Download JQuery Accordion Menu Widget 3.1.2 (82,537)

Installation

  1. Upload the plugin through ‘Plugins > Add New > Upload’ interface or upload ‘jquery-vertical-accordion-menu’ folder to the ‘/wp-content/plugins/’ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. If you dont yet have a custom menu, create one in the Menu area.
  4. In the widgets section, select the jQuery accordion menu widget and add to one of your widget areas
  5. Select one of the available custom menus from the dropdown list

Your theme must be able to support custom menus

Useage

Accordion menus can be added to your site using either widget areas or shortcodes (available starting version 3.0)

Before you can configure the accordion menu you require a Wordpress custom menu – either use an existing menu or set one up via the menu option in Wordpress admin.

Note: that in order for the accordion effect to work the menu must have at least 2 levels.

Create Your Vertical Accordion Menu Using Widgets

Either use an existing widget in your Wordpress theme or create a new widget area in the required location.

For more information on how to add a new widget to your Wordpress theme see our follow up Wordpress tutorial – “Adding A Widget Area To Your Theme Files”.

To create your accordion menu drag the jQuery Accordion Menu widget to the widget area and select your custom menu from the drop down menu.

Configuring Your Accordion Menu Widget

The widget has several parameters that can be configured to help cutomise the vertical accordion menu:

Click/Hover

Selects the event type that will trigger the menu to open/close

Note: care should be taken when selecting the hover event as this may impact useability – adding a hover delay and reducing the animation speed may help reduce problems with useability

Auto-close open menus

If checked this will allow only one menu item to be expanded at any time. Clicking on a new menu item will automatically close the previous one.

Save menu state (uses cookies)

Selecting this will allow the menu to remember its open/close state when browsing to a new page.

Auto Expand Based on Current Page/Item

If selected the menu will use the inherent Wordpress menu system for identifying the users current page and automatically expand the sub-menus. Useful if users browse to pages via other links.

Disable parent links

If selected, any menu items that have child elements will have their links disabled and will only open/close their relevant sub-menus. Do not select this if you want the user to still be able to browse to that item’s page.

Close menu (hover only)

If checked the menu will automatically fully close after 1 second when the mouse moves off the menu – only available if event type is “hover”

Show Count

Check this box to display a count of the number of links under each menu heading.

Class Menu

If you want to create your own skin and have more control over the menu styling you can enter your own CSS class name. If you are unsure about this setting or want to use the default Wordpress class (menu) leave this field blank.

Class Disable

Input the CSS class of any parent menu items that you want to disable – e.g. if you add a custom CSS class of “menu-disable” in the Wordpress menu editor page to a menu link that you dont want open/close then enter “menu-disable” in this field.

Leave the field blank if you want all menu items to use the accordion features.

Hover delay

This setting adds a delay to the hover event to help prevent the menu opening/closing accidentally. A higher number means the cursor must stop moving for longer before the menu action will trigger.

Animation Speed

The speed at which the menu will open/close

Skin

Several sample skins are available to give examples of css that can be used to style your accordion menu.

Create Your Vertical Accordion Menu Using Shortcodes

The minimum requirement for adding a menu using a shortcode is to include the name of the menu that you want to use for the vertical accordion – the name must match one of the menus created in the Wordpress menu admin page.

To add a menu using shortcodes use the following code:

[dcwp-jquery-accordion menu="Test Menu"]

The above shortcode would add the menu “Test Menu” with the default accordion settings (see below)/

Optional shortcode parameters for customising the menu (refer to widget settings above for information):

  • event – click/hover (default = click)
  • auto_close – true/false (default = false)
  • save – true/false (default = false)
  • expand – true/false (default = false)
  • disable – true/false (default = false)
  • close – true/false (default = false)
  • count – true/false (default = false)
  • menu_class – optional (default = menu)
  • disable_class – optional (no default)
  • hover – 600
  • animation – slow/normal/fast (default = slow)
  • skin – black/blue/clean/demo/graphite/grey (default = No Theme)

Example of custom menu using shortcodes

To add an accordion menu using the “hover” event, save state on, parent links disabled, include count of child links and auto-expand to show current page:

[dcwp-jquery-accordion menu="Test Menu" event="hover" save="true" disable="true" count="true" expand="true"]

Using shortcodes in template files

See FAQ – Adding an accordion menu using shortcodes to your template files.

Creating A Custom Skin

For a blank CSS template and more information on how to create a custom skin for this plugin see FAQ – Creating a custom skin for the wordpress jQuery vertical accordion menu plugin.

Frequently Asked Questions

Please refer to our FAQ pages for the jQuery Verticall Accordion Menu Plugin for a complete list of questions and answers.

Many issues that can crop up with installing and using the plugin with different themes have also been covered in our comments section. Please also check previous comments and FAQ for further information/tips.

For plugin customisations or additional support please contact us for a quotation.

Demo Accordion Menu

Demo – WordPress Vertical Accordion Menu Plugin

Download The Plugin

Download JQuery Accordion Menu Widget 3.1.2 (82,537)

Feedback

If you find this plugin useful please rate it at wordpress.org.

Updates

Version 3.1 – 18th January 2012

  • Fixed: Auto-close bug

Version 2.6 – 19th June 2011

  • Added: Ability to set menu CSS Class – default “menu”
  • Added: Ability to disable parent menu items using a CSS class
  • Update: Revision to auto-expand system
  • Update: jquery plugin version – jquery.dcjqaccordion.2.8.js

Version 2.5.4 – 25th May 2011

  • Fixed: Bug with save state option.

Version 2.5.3 – 23rd May 2011

  • Update: jQuery Accordion Menu plugin includes check to see if cookie plugin exists.

Version 2.5.2 – 20th May 2011

  • Update: Using updated jQuery Accordion Menu plugin – fixed bug with count.

Version 2.5 – 7th Apr 2011

  • Added: Auto-expand no longer requires the “Save State” option to be selected.

Version 2.4 – 24th Mar 2011

  • Added: Auto-expand option for menu to expand sub-menus based on users current page.

Version 2.3 – 21st Mar 2011

  • Edit: Cufon fonts can now be used in the accordion menu

Version 2.2 – 16th Feb 2011

  • Added: Option to show count of number of child links
  • Edit: Fixed cookie problem with multiple menus

Version 2.0 – 26th Feb 2011

  • Added : Ability to select either hover or click to activate menu
  • Added : Hover delay setting for hover event
  • Added : Close menu option for hover event

Version 1.1 – 20th Feb 2011

  • Fixed : Duplicate ID with themes adding ID to widget container
  • Fixed : Set cookie path

Screenshots

Widget in edit mode

Sample vertical accordion menus

For alternatives to the vertical accordion menu check out our Vertical Mega Menu Plugin or the Drill Down iPod Style Menu Plugin. For more information and tips on the best type of vertical menu plugin to use refer to – Choosing a Vertical Menu Wordpress Plugin For Your Site.

850 Comments

  • Not sure if this question has been asked and I’m sorry if it has, but is it possible to add this accordion to the main navigation populated directly from WordPress?

    Thanks in advance!

    • Hi,

      The menu only works with menus populated by Wordpress. Just insert the menu where required using either a widget area or a shortcode

      • Thanks Lee,

        That was actually a really stupid question, everything makes sense and I’m good to go. Great plugin!

  • Hi, I was install the plugin but he is dont work. I was doing everything but I see on my website the same menu (menu not change) ;/ I have WP 3.2.1.

    • Hi,

      See FAQ section and previous comments for possible solutions

  • Hi there,

    I want the vertical menu on my site to work like demo 1 for click. However when you click on the menu it opens the sub-menu’s but won’t close them and if you try by clicking the close arrow on the parent menu it just launches the parent menu page. Please help.

    Thanks

    • Sounds like there may be a javascript error then somewhere in the page. Try checking the page using firebug

  • Thanks for this great plugin. I’m really happy with it.

    Is there any way to make the accordion function remain open after one clicks a link to open a new page?

    Thanks again.

  • I already find in your answers that it’s not possible to display in the menu just the Current Item and its child’s, and not the other items.
    But maybe there is a way to do it?? If you can find a way to do it I will use this amazing plugin and will make a donation for you. Thanks

  • this plugin seems incompatible with the plugin called “Dynamic Widgets” from wordpress . org
    If Dynamic Widgets is active your widget’s settings disappear.

    would you please check and see if you can fix it or if it is a problem of hte other widget? in that case I’ll notify the other author.

    • Hi,

      There should be no problems with the accordion plugin

  • Something it’s not working properly:

    Uncaught TypeError: Object [object Object] has no method ‘dcAccordion’

    What kind I do to fix this?

    • Hi,

      Sounds like a jQuery error. Check out the FAQ section

  • Hey,
    I´m to 99% happy with the according menu plug.
    Thanks a lot!!!
    But I have only one problem.

    In the options I have enable the parent links and If I click on it, the tween will get interruppt by loading the new side. It´s more a judder.
    Any hint how I can fix this?

    I use my cstom skin (in plugin settings = no Theme). I have a sprite.png for active condition. Could the slide interrupt by that?

    • Hi,

      This is the the page loading again when the link is clicked

      • Okay,
        are there any workarounds you know?
        Maybe writing a script that first does the tween and after that loading the page?

        • Not that Im aware of. The accordion jquery code can only be applied after the menu is available in the page

      • Okay,
        so any hint how I can make it tween without the interruped from loading the page?

        Maybe loading the page after the tween?

        • Hi,

          See earlier reply

          • Sorry for the double post!

            Hmm, okay than otherwise. Loading the page and than doing the slides.
            Maybe with an window.onload???

  • Thank you Lee, but I have tried that at http://kingsely.org/?page_id=7 and it does not seem to come through.

    If you click on School Life, I would like Pastoral (which also has children) to have the greeny background and blue writing as in the last line of the stylesheet below.

    #dc_jqaccordion_widget-2-item {border-top: 0px solid #00365E; text-align:right; font-size:11px; margin-left:25px;background-color: #ECF6F5;}
    #dc_jqaccordion_widget-2-item ul, #dc_jqaccordion_widget-2-item ul li {margin: 0; padding: 0; border: none; list-style: none;}
    #dc_jqaccordion_widget-2-item ul a {background-repeat: no-repeat; background-position: 10px center; border-top: 1px solid #00365E; border-bottom: 1px solid #ccc; padding: 5px 5px 5px 32px; text-decoration:none; display: block; font-weight: bold; text-transform:lowercase;}
    #dc_jqaccordion_widget-2-item ul a.dcjq-parent {background-color:#ECF6F5; color:#00365E;}
    #dc_jqaccordion_widget-2-item ul a.dcjq-parent.active { background-color: #00365E; color:#ECF6F5; }
    #dc_jqaccordion_widget-2-item ul li ul li.current-menu-item a { background-color: #fff; color:#84CAC6; }
    #dc_jqaccordion_widget-2-item ul li ul li {background-color: #84CAC6; color:white;}
    #dc_jqaccordion_widget-2-item ul li ul li a {background-color: #84CAC6; color:white;}
    #dc_jqaccordion_widget-2-item ul a:hover {background-color: #84CAC6; color:#00365E; }
    #dc_jqaccordion_widget-2-item li ul li ul {background-color: #84CAC6; color:#00365E; }

    Can you see what is wrong and what reference would I need to style assemblies which is a child of pastoral?

    Many thanks if you can help at all? Do you have a donation PayPal widget?

    Marc

    • Hi,

      If you can contact me via email it would probably be easier. Our standard hourly rates for custom coding is $40/hour

      • Lee

        I managed to work it out!

        #dc_jqaccordion_widget-2-item ul li ul li a.dcjq-parent {background-color: #84CAC6; color:#00365E; }
        #dc_jqaccordion_widget-2-item ul li ul li ul li a {background-color: white; color:#00365E; }
        

        Thanks for your prompts!
        Marc

  • Is it possible to apply CSS to the grand child of a menu?

    I have a parent who has a child who also then has children and I would like to apply CSS to that child and children.

    Many thanks
    Marc

    • Hi,

      For the CSS selector you can use:

      .menu li ul li ul

      Obviously change the “menu” class to be the same as your own menu

  • Hello!
    This is great plugin but i am facing a problem and hope to get the solution here, I want to hide the other menu items when there is an active menu item.
    For example if i have home contact and about us menu links and home have sub menu (home will be disable link) so when i click the home the home and its sub menu will be showing while other will be hide, on the same way when i click on about us the other menu will be hide and only the about us menu will be showing.

    Thanks

    • Use auto close option

      • Hi Lee! thanks for you quick response,
        I mean to hide the other top level menu (using display:none ) and only show that menu on which page i am.

        For example : My site show Home product contact About Us

        when i click on about us then my site will show only : About Us and hide the other menu

        similarly if someone click on product then me site will only show product (and its sub menu if have ) and hide other.

        Thanks
        Khan

        • Hi,

          Unfortunately the plugin doesnt include any options for this

          • Hey Lee!
            In JavaScript File (jquery.dcjqaccordion.2.9.js) function $objLinks.click(function(e) about line 117 i have used $(’ul.’+defaults.classDisable+’ > li’).hide();

            but this hide all the menu when i click on any one and i want to hide all accept the active.

            Thanks
            Khan

  • Hi Lee

    Love your plugin, it’s the only accordion for Wordpress that actually works properly with saved states etc.

    For a project I’m working on, I need display the posts’ featured images as small thumbnails within the menu – is this even possible? I’ve looked at the plugin’s core code, and wondered if you could point me in the right direction if possible…

    I’d really appreciate your thoughts

    Many thanks
    Paul

    • Hi,

      The plugin doesnt actually create the menu code so you would need to do that via the WordPress menu system and then apply the accordion plugin

  • Hi,
    great plugin! Thanks!
    I’m tryng to use a

    <br/>

    tag in the title, but wordpress reject HTML in widget title… Can you help me?
    Thanks

    • Hi,

      This is standard for a widget control panel as tags are stripped from the entry. I would suggest inserting it using jQuery

  • Hi there,
    First of all congratulations for the great plug in.
    Beside display a count of the number of links under the heading, Is there any way to show posts count under categories?

    Thanks in advance.

    • Hi,

      That would need to be created in the actual menu. The plugin doesnt actually generate the menu code so doesnt have that information available

  • I’m having an issue showing up in IE8 (the most used browsers by our patrons) . It only works on “hover”; I need it to be set to “click”. When it is set to “click” then I get no hover action on the links. Everything works great in FF and Chrome.

    .dcjq-mega-menu ul.menu li.mega-hover a, .dcjq-mega-menu ul.menu li a:hover {
    	color: #000;
    	text-shadow: none;
    	background: #f4f3f4 100% -40px;
    }
    

    This is a custom style incorporated into my stylesheet.

    • Hi,

      Not sure why this would occur, unless you have a javascript error specific to IE. Try checking the site using firebug and see if it shows any problems

  • Hi Lee,

    Thank you again for your respond.
    Can you help me to create the container with 250 pixels and put it into my site?
    How much?
    Thank you,

    Andrew

  • Hi there,
    Menu is working, but how could I change the length of all accordion?
    It goes through the home page.
    You could see it here: http://www.mississauga.ru/
    You can find accordion menu at the bottom at the right side of page.
    On Demo – WordPress Vertical Accordion Menu is short
    http://wordpress.org/extend/plugins/jquery-vertical-accordion-menu/, but when I install it to my page, it became long.

    Thank you,

    • Try changing the CSS

      • Lee,
        Thanks a lot for your quick respond.
        I have in folder skins couples CSS style lists for different kind of skin, but unfortunatly, I still can not find a place, where I could change the length of all accordion. I will be appreciate to you if you explain me that. Thank you,

        • The length is not set in the CSS. This is automatic based on the number of menu items

          • Hi Lee,

            I mean the horizontal “width” of your accordion.

            Thank you,

            Andrew

  • Hello Lee,

    First of all, thnak you for the plugin, which is very successful.
    However when I add it in my page with the shortcode, no matter where the code is, my accordion menu takes place constantly on the top of my page.
    Do you understand what is the problem ?

    Thank you in advance.
    Quentin

    This is my code for the “jQuery Vertical Accordion Menu”

    [dcwp-jquery-accordion menu="menu gamme h.care" expand="true" disable="true" animation="fast" close="true"]
    • Hi,

      No sorry. I havent come across this problem before.

  • Hello

    I’m trying desperately to work out if there is a way to enable my parent page menu items (’Mens’ and ‘Womens’) to auto expand when on their page, to show their sub-page menu items automatically. You can see my menu under ‘Mens’ or ‘Womens’ categories from the main menu here: http://www.huskyorganic.co.uk

    I would like the T-shirts under the relevant parent category (Mens or Womens) to be visible in the menu when on that relevant parent page. Also, is it possible to have the parent page text in bold when that page is active?

    Many thanks in advance

    Ben

    • Hi,

      If the menu is set up so it uses the default wordpress classes then you can use the “Auto Expand Based on Current Page/Item” option

      To bold the text you will need to add the relevant CSS rules to your theme’s style sheet, again using the built-in CSS classes added by Wordpress to the menu

      • Hi Lee

        Thanks for your reply. Unfortunately, the ‘Auto Expand Based on Current Page/Item” option doesn’t seem to be working as required. I have found this site which also uses your plugin and it does just what I want, where the parent page is extended to show the relevant sub-pages here: http://www.nbalance.de/medizinische-coaching The parent category is also coloured purple to help identify where in the menu you currently are.

        Many thanks in advance

        Ben

  • Hi Lee, I just installed an update (WP 3.3.1 and one of yours for the plugin) and it’s broken my accordian menu.

    Any ideas how to fix (or any other reports of update issues)? See my ^ link for the site in question.

    Cheers

    • Hi,

      The plugin is compatible with 3.3.1. Check for errors with other plugins that may be causing the problem