10 jQuery Great Accordions

Sam Deering
You can never underestimate the uses of a jQuery accordion. They can be to use them for menus, slideshows, squeezing content into sidebars, the list is endless! To make life easier, we made a list of ten jQuery accordions that you can use on your site. Enjoy!


1. Xbox 360-like horizontal jQuery Accordion

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.
Xbox-360-like-horizontal-jQuery-Accordion-.jpg
Source


2. HoverAccordion jQuery Plugin

An Apple.com like vertical accordion that opens on hover that would look good on your sidebar.
HoverAccordion-jQuery-Plugin-.jpg
Source


3. Stupid Simple jQuery Accordion Menu

Accordion menus are a very handy tool to show and hide information as needed. Learn how to create one.
Stupid-Simple-jQuery-Accordion-Menu-.jpg
Source


4. 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.
State-Saving-jQuery-Accordion-Menu-without-Reloading-the-Page-.jpg
Source


5. Accordion Menu Screencast Tutorial

Learn how to build a simple, unobtrusive, accordion style menu using basic events and animations.
Accordion-Menu-Screencast-Tutorial-.jpg
Source


6. Accordion Madness

One of the options how to create accordion menu.
Accordion-Madness-.jpg
Source


7. 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.
Slide-Out-and-Drawer-Effect-.jpg
Source


8. 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.
TinyAccordion-JavaScript-Accordion-.jpg
Source


9. JavaScript Accordion Menu Wizard

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


10. Extra: Grid Accordion – $8

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

Win an Annual Membership to Learnable,

SitePoint's Learning Platform