Accordion menus are used widely in navigating, sliding, minimizing and maximizing content. Such accordions practically are expandable whenever needed; you can really save some space and be able to show a lot of information using this technique.
Yes, and, of course, such sliding content always is great from the design point of view aby giving your visitor unique experience while he is looking at the site. Great, isn’t it? – here you will find a lot of customizable plugins, and tutorials to help you to understand accordions.
This article has been updated on 5/28/2012
Accordionza is a very flexible and lightweight jQuery (v1.4+) accordion plugin.
- Many features — Easily configure all effects and speed, pause on hover, autoplay and autorestart, collapsable captions and more.
- Keyboard navigation — Optionally enable the cursor keys to browse an accordion.
- Lightweight — The plugin takes only 3kB to load.
- Flexible — Three accordion styles are included. Create your own with some HTML & CSS skills.
- Solid — No wobbly edges as often seen in other accordion scripts.
1. Yup, Yet another jQuery Accordion Plugin
Simple free jQuery accordion plugin. Available in 4 versions. Check out the tutorial how to use it, get the code, and download all the source files. Some of the new features:
- Built according to the jQuery plugin pattern
- No more need for menus to have an ID
- An ‘active’ class is now added to each toggle that has an open panel below it
- Panels that hold other things than lists. You can now add anything
- Nested accordions
See examples of different use of accordion, see how to set it up, get the source and read about Options, Events, Theming.
2.1. Grid Accordion
Grid Accordion combines the functionality of a thumbnail grid and an accordion panel, offering you an interesting method to display your portfolio. You have the option to use either XML or HTML . The powerful API will allow to further enhance the functionality of this jQuery plugin and make it possible to easily integrate it into your own application.
3.1. Classic Accordion
Classic Accordion is a jQuery plugin that allows you to easily create accordion panels. You have the option to use XML , which will make the accordion panel much easier to setup and maintain. However, you also have the option to use HTML instead of XML . The plugin also provides an easy to use API which will allow to further enhance the functionality of the accordion and make it possible to integrate it into your own application.
In this post, you’ll see two examples of accordion. First menu’s visibility gets toggled on clicking on the header while the another menu’s visibility gets toggled when mouse is moved over it. See the tutorial and download source files as well.
Step by step tutorial that will take you through the creation of a jQuery accordion menu. Of course, you can view the demo and download source files.
Learn how to create easy horizontal accordion menu.
This jQuery plugin allows you to easily transform any unordered list into a horizontal menu. Explore tutorial, see documentation and different examples of use here.
Learn how to create tweaked accordion menu, in which you can bookmark and re-access sections without re-clicking on them. Viewand download source too.
Learn how to build a simple, unobtrusive, accordion style menu using basic events and animations.
See example of hover accordion menu, learn how to create it and download the plugins.
Simple and fast plugin for creating simple horizontal accordion menus. Demo included.
The plan for this tutorial is to show how to create an accordion using the jQuery UI function, then create one using some custom coding. You’ll be using a blog sidebar as an example. View source.and get the
Detailed tutorial how to create great looking accordion menu.
One of the options how to create accordion menu.
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. Demo and code included.
This versatile 1kb horizontal accordion script can be used for menus, images, presentation content and more.
22. Deluge Studios
26. Exotics RTC
27. Two Chaps
30. DJ Eric C
Extra: Grid Accordion – $8
Perfect for a grid gallery. The usual worry about displaying multiple images at the same time is eliminated here because of its smart code structure. Seen in Code Canyon, a marketplace of Envato where all sold items are topnotch in quality because before they even get to be showcased, experts see to it that products are up to standards. Plus very warm support from the coder himself/herself!