9 Most Popular jQuery Accordion Plugins

9 Most Popular jQuery Accordion Plugins

Accordions is one of most popular and user friendly topics in jQuery Framework. Accordion can be use as menu, slideshow contents or store content into sidebars, Accrodion can be very useful for displaying lots of data according to their categories in a small amount of space.

Accordion has some basic characteristics like – few menus displayed vertically or horizontal,when click on a menu, corresponding sub menu will expand and hide other sub menu, and Accordion has indicators like changing background color of menu bar or and up/down arrow to show the state of the menu.

There are lots of accordion plugins over the internet. From them I’m going to present top and popular jQuery accordions for you that you can easily use in your website.

Let’s go –

– Xbox 360-like horizontal jQuery Accordion Plugins:


An Xbox-like horizontal accordion that would look really good being used as a featured content slideshow – an alternative to the JonDesign one that everyone uses.


– HoverAccordion jQuery Plugins:

HoverAccordion jQuery Plugin

An Apple.com like vertical accordion that opens on hover that would look good on your sidebar. This is yet another accordion script, except you don’t have to click to open one item, you just move your mouse over it.

Note: this page is hopelessly out of date – made back in 2008, and I haven’t been updating it ever since, and cannot currently provide support for the script. An updated version of the script will arrive later in 2012.


– Stupid Simple jQuery Accordion Menu Plugins:

Stupid Simple jQuery Accordion Menu

Accordion menus are a very handy tool to show and hide information as needed. Learn how to create one.



– State-Saving jQuery Accordion Menu Plugins:

State-Saving jQuery Accordion Menu without Reloading the Page

Learn how to create tweaked accordion menu, in which you can bookmark and re-access sections without re-clicking on them.


– Accordion Menu Screencast Tutorial:

Accordion menu screencast tutorial

This is the first (of hopefully many) screencasts that will provide a quick tutorial to a simple demo of jQuery in action. I plan on doing at least 2-3 more based upon the talks that I’ve given lately – hopefully I can trickle those out over the next week(s) or so. Enjoy!


– Accordion Madness:

Accordion Madness

One of the options how to create accordion menu.


– Slide Out and Drawer Effect:

Slide Out and Drawer Effect

This tutorial will walk through how to create your own simple plugin, and then replicate the Apple downloads drawers using the very excellent Accordion plugin.


– TinyAccordion JavaScript Accordion:

TinyAccordion JavaScript Accordion

This lightweight (1.2 KB) JavaScript accordion can easily be customized to integrate with any website. It now includes multi-level support, a parameter to determine whether only one panel can be expanded concurrently, and a hide/show all toggle.


– JavaScript Accordion Menu Wizard:

JavaScript Accordion Menu Wizard

JavaScript Accordion Menu is an image based site navigation menu. ScriptOcean Accordion Menu Wizard supports horizontal and vertical accordion menus.


– Grid Accordion:

Grid Accordion

Grid Accordion combines the functionality of a thumbnail grid and an accordion panel, offering you an interesting method to display your portfolio.


Was this information useful? What other tips would you like to read about in the future? Share your comments, feedback and experiences with us by commenting below!

Back To Top