20 Beautiful jQuery Accordion Menu Plugins and Tutorials

jQuery accordion menu is common among websites that adopt vertical navigation. This takes the form of drop-down menus with attractive and smooth animation or transition. Basically, accordions in navigation save a great amount of real estate in a website as it can be expanded or compressed just like a musical accordion. For big websites, the use of jQuery accordion menu allows them to show the links to their pages and contents in a professional and attractive way.

To help you a little, we are sharing here some of the jQuery accordion plugins and tutorials what you can use to jumpstart your website navigation design. You will find premium as well as free items for those who want to play with navigation menus without spending anything. The tutorials will of course help you how to create and implement awesome jQuery powered accordions on your site.If on the other hand, you don’t find the plugin that you are looking for in this post, I suggest that you head to our previous post, 20 Marvelous jQuery Drop Down Menu Plugins and Tutorials for more options. Enjoy!

Affiliate Disclosure: Some of the links in this post are affiliate links. If you visit those links and purchase the product you find, I will earn a commission without additional cost on your part. Before making any purchase I encourage you to evaluate the products or services on your own. This post is not meant to endorse or to recommend particular items.

Premium jQuery Accordion Menu Plugins

Accordion Multi Menu – COMPLETE INFO

Key Features: 5 Color schemes, PSD included, FontAwesome icons, CSS3 animations, Clean and modern design, Documentation


Accordion Multi Menu is a simple, modern and easy to install jQuery and CSS3 vertical accordion menu.

Vertu – Accordion Menu – COMPLETE INFO

Key Features: Easy to change structure via CSS, Cross Browser Support, Simple menu construction, 6 ready color schemes


Vertu Accordion Menu is a simple yet beautiful accordion menu for you website.

jQuery Plug-in: Drop List – COMPLETE INFO

Key Features: 6 color schemes, Cross browser compatible, Easy to use and install, Works with jQuery Library


This is a jQuery plug-in, which helps to make beautiful sliding drop lists. It is available in 6 color schemes.

Lida Accordion Menu – COMPLETE INFO

Key Features: 8 styles, Pure CSS3 / HTML5, CSS Effects, Icon Support, Cross Browser, Free Font, Documented


Lida is an awesome jQuery accordion menu plugin based in pure CSS3.

jQuery Searchable Accordion – COMPLETE INFO

Key Features: Responsive, 3 leves of nesting, Nice API : search, open methods, Fully W3C compliant,  Maybe used as a menu!


This jQuery accordion plugin features 3 level nesting on a responsive design. You can use it really well as a navigation among others.

Z Light Accordion – COMPLETE INFO

Key Features: Adaptive, Fully customizable, Cross browser, Simple to use, Multiple connection, Click or Hover


Z Light Accordion is an adaptive jquery accordion that supports thirty animation effects. You can embed your icons, you can adjust the speed of the animation, you can change the color, size and etc. in this plugin.


Key Features: Accessible, Hash Watch, CSS3 transitions, Multiple instances, Light and Dark Versions


Accordion A is a lightweight, accessible jQuery accordion plugin with smooth and beautiful CSS3 transitions.

Mate Tabs jQuery Plugin – COMPLETE INFO

Key Features: Responsive, Retina ready (Font Awesome integrated), Parameters when tabs transform to accordion, Fully customizable


Mate Tabs is a responsive tabs and accordion jQuery plugin.


Key Features: Horizontal Navigation Bar, Side Navigation Bar, Sticky Footer Bar, Slide Menu, Accordion Menu, 10 color skins


As the name suggests, Sherpa is a total solution for all your navigation requirements. Sherpa brings together the three main navigation elements of every interface – Navbar, Sidebar and Sticky Footer. Each one consists of a selection of different menu types including: Slide Menu, Mega Menu, Accordion Menu and Drop Menu. You can pick, choose and mix these to make a really unique navigation. All three navigation elements can also be minimized or hidden to give your content even more space to be seen. The content will automatically grow to fill the space. It has 10 different color skins, 12 beautiful background images, uses CSS3 effects and comes with 500+ icons.


Key Features: CSS3 & jQuery, More than 20 themes, 5 pages already designed, Easy to customize, Nested Tabs, Responsive Design


Clean tabs is a CSS3 and jQuery responsive navigation tabs, optimized for mobile & touch devices. On small screen, the horizontal tabs turns into a vertical accordion. More than 20 clean, smooth and elegant themes realized to work on every devices.

jQuery Dashboard Navigation – COMPLETE INFO

Key Features: Available in 6 colors, Powered by JQuery, Easy integration / customization, How to Setup guide


Looking to give your next web app or custom CMS dashboard that edge? If so then this accordion style jQuery dashboard menu will do just that. Impress your users with the modern dark design whilst giving them the best possible experience. This script comes with the choice if 6 different colors and is very simple and easy to implement.

Free jQuery Accordion Menu Plugins and Tutorials

Flexible Slide-to-top – COMPLETE INFO

Key Features: Responsive Design, Flexible, Nice CSS3 transitions


This plugin is a simple responsive accordion that, when opened, will slide to the top of the viewport and reveal the content by fading it in. The idea is to avoid that the user has to scroll the content area into place.  it has some nice CSS3 transitions for the arrow to appear and to rotate when we click on an item. The accordion will be flexible, meaning that it will have a liquid width adjusting to the screen size.

Simple Accordion Menu – COMPLETE INFO

Key Features: Vertical accordion style menu tutorial 


jQuery tutorial is a perfect example of how easy it is to add a slick vertical accordion style menu to your website with just a few lines of jQuery code!

Making a Content Accordion – COMPLETE INFO

Key Features: jQuery Tutorial, Content Accordion with Individual background property


This tutorial will teach you how to create an attractive jQuery accordion menu with individual background property using jQuery and CSS.

Akordeon Accordion Plugin – COMPLETE INFO

Key Features: Lightweight and customizable interface


Akordeon is a stylish jQuery plugin for adding efficient accordion style menu to a web page. The idea behind Akordeon is to provide a lightweight and customizable interface for collapsible panels that can hold any kind of data in a limited space. Akordeon is fully customizable and can be used to display large chunks of data (text, images etc.) in a limited space. For instance, you can use it to display categorized data or menu options just like a restaurant’s menu items with each category data displayed in a separate panel.

jQuery Accordion menu – COMPLETE INFO

Key Features: Multi-level menu, vertical orientation


jQuery accordion menus are menus that act like a musical accordion, with regards to their ability to expand and contract based on user interactions. This helps display additional information for the active menu items, while hiding non-relevant information from the user. Additionally, it can help add more content without sacrificing white space, leading to more usable and attractive user interface design.


Key Features: Accordion jQuery Menu Tutorial, Creation of an extension


This tutorial will show you how to create an accordion jQuery menu. You will learn how to create an extension just to make it simple to implement in every website.

Create Accordion Menu – COMPLETE INFO

Key Features: Simple jQuery Menu Tutorial, Uses jQuery effects to animate the accordion menu.


In this tutorial you will learn how to create a simple Accordion Menu using jQuery. Accordion Menu are the menu with some animation effect. It has few top line menu items which when clicked toggles to open sub menu options. When another top level menu is selected, other open menu will automatically collapse and save useful screen area.

Making Accordion Menu – COMPLETE INFO

Key Features: Fancy Accordion Tutorial, Works on Clicking or Mouseover


This post will show you how can you create fancy accordion menu using jQuery. In this post, you’ll see two examples of accordion. First menu’s visibility get’s toggled on clicking on the header while the another menu’s visibility get’s toogled when mouse is moved over it.

Exactly How to Create a Custom jQuery Accordion – COMPLETE INFO

Key Features: jQuery Accordion Menu Tutorial, Bandwidth efficient Custom Accordion


Accordions can be very useful for showing lots of different sections of data in a small amount of space. jQuery UI has a built in Accordion function, but according to the jQuery UI Build your Download, the size of the Core jQuery UI and Accordion scripts are 25kb and 16.6kb, respectively. This tutorial will show you how to build a custom accordion that is more “bandwidth efficient”.

No Responses to “20 Beautiful jQuery Accordion Menu Plugins and Tutorials”

Leave a Reply

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