10 jQuery Accordion Plugins & Tutorials

10 jQuery Accordion Plugins & Tutorials - jQuery Accordion is a really easy way to squeeze a bunch of text, images, buttons, or whatever you are using in to a smaller area.

Grid Accordion with jQuery

Accordions are a UI pattern where you click on a title (in a vertical stack of titles) and a panel of content reveals itself below. Typically, all other open panels close when the new one opens. They are a clever and engaging mechanism for packing a lot of information in a small space.





jQuery plugin: Easy Accordion

Easy Accordion Plugin keeps the HTML to the minimum, is SEO friendly and fully accessible, uses the CSS rotation to rotate the slide titles (no need for images here!), works in all the major browsers, allows for autoplay, it’s opensource and fully customizable and, what count most, it’s free!





jQuery Common Accordion - Horizontal & Vertical





jQuery - Horizontal Accordion

This jQuery plugin allows you to easily transform any unordered list into a horizontal menu.





Colorful Content Accordion, CSS & jQuery





jQuery plugin: Accordion

This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs. Options are available to specify the structure, if necessary, the active element (to display at first) and to customize animations. The navigation-option automatically activates a part of the accordion based on the current location (URL) of the page.





Exactly How to Create a Custom jQuery 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. Today, I’ll show you how to build a custom accordion that is more “bandwidth efficient”.





Simple Accordion w/ CSS and jQuery

When designed and implemented with usability in mind, the accordion can be incredibly useful when organizing a good chunk of content.





Micro Accordion

JQuery Micro Accordion Plugin is a small (1.33 KB) plugin that creates a simple accordion - no bells or whistles. It's pretty easy to use just download it at the bottom of this post. A demo is included in the download.





Elegant Accordion with jQuery and CSS3