Total Followers 132,503
Accordion menus are used widely in navigation, 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 design point of view and giving your visitor unique experience while he is visiting. Great isn’t it? – here you will find a lot of customizable plugins, tutorials helping you to understand accordions at all as well as great examples, where this technique has been implemented in successful sites!
This article has been updated on 5/28/2012
Accordionza is a very flexible and lightweight jQuery (v1.4+) 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:
See examples of different use of accordion, see how to set it up, get the source and read about Options, Events, Theming.
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.
Very detailed tutorial about including jQuery in your mockup, creating the JavaScript, creating CSS and HTML. You can also view the demo and download all files.
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. View demo and 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 demo and get the source.
Detailed tutorial how to create great looking accordion menu.
One of the options how to create accordion menu.
Learn how to create the well-known JavaScript accordion with the most minimal amount of HTML, CSS, JS and of course, with a beautiful interface as well. Check out demo and download source.
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.
Another simple tutorial how to create standard accordion menu. View demo and download files.
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. For more information visit leigeber.com.
Javascript Accordion Menu is an image based site navigation menu. Scriptocean Accordion Menu Wizard supports horizontal and vertical accordion menus. Download here.
This versatile 1kb horizontal accordion script can be used for menus, images, presentation content and more.
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!
Get The Only Freelancer crash course you will ever need to read!
chilling, living, dreaming. you can check out my blog, find me on flickr and follow me on twitter.
Saturday, April 28th, 2012 14:20
This link not working – 13. Simple Accordion w/ CSS and jQuery :(
If someone know something similar, please share. Thanks
Monday, April 30th, 2012 05:03
Lauris, it seems like Sohtanaka website completely disappeared! However I updated link and found that menu, cheers!
Tuesday, October 4th, 2011 15:57
Brilliant jquery slide effects,
Thanks for providing all these links.
Monday, June 27th, 2011 02:29
Thank you you for this Accordion menus list, really helpful for me. Thank you!
Wednesday, March 30th, 2011 19:09
uau! how I wish to learn and do that :]
Tuesday, February 22nd, 2011 23:08
Interesting accordion solutions. I want to make something like DJ Eric C’s site. But it needs to have more then a couple options (like 30) so I think its going to take forever to load, anyone have something similar with more in it?
Friday, November 26th, 2010 20:52
Nice work selection. Just add a new one to the list: http://www.darlesson.com/jquery/accordion. This jQuery Accordion is very easy to implement and you can find the free source code and examples in the website above.
Saturday, November 6th, 2010 18:42
Off the subject…but on the DJ Eric C example, the photograph of him has a kind of washed out, contrasty, white-levels-manipulated look about it. I’ve seen it before in a lot of high-end advertising work…Does anyone know how to create this effect?
Thursday, October 7th, 2010 10:58
Some accordion menus look beautiful but they are not good for touch-based input devices. :)
Thursday, September 30th, 2010 10:35
I do like the accordion quite a lot. I used one from dynamic drive on my site. I’ve also found the Jquery for Designers site very helpful in the past.
Saturday, September 18th, 2010 10:03
Hi guys, I just wanted to let you know that I’ve recently developed a new horizontal accordion plugin for jQuery, which is called Easy Accordion. It works in all the major borwsers and uses CSS3 for text rotation. Check it out here: http://www.madeincima.eu/blog/jquery-plugin-easy-accordion/
Cheers
Saturday, July 10th, 2010 07:12
Thanks for featuring our portfolio site (TwoChaps.com)! Keep an eye out for our blog. It’ll be up by the end of the week.
Cheers!
Monday, July 5th, 2010 14:13
These script will be very useful in premium WordPress theme :)
Sunday, July 4th, 2010 20:43
Need to improve my interface will try using JQuery to Improve the interface of the my blog as well as website. I really like the DJ Eric C website.
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
![3-Step Action Plan to Get the Best Work Environment [+VIDEO]](http://www.1stwebdesigner.com/wp-content/uploads/2012/12/preview-small-3stepactionplan.jpg "3-Step Action Plan to Get the Best Work Environment [+VIDEO]")
Nikunj Tamboli
Sunday, July 4th, 2010 20:43
Need to improve my interface will try using JQuery to Improve the interface of the my blog as well as website. I really like the DJ Eric C website.
Min Thu
Thursday, October 7th, 2010 10:58
Some accordion menus look beautiful but they are not good for touch-based input devices. :)
Deryck
Thursday, September 30th, 2010 10:35
I do like the accordion quite a lot. I used one from dynamic drive on my site. I’ve also found the Jquery for Designers site very helpful in the past.
Andrea Cima Serniotti
Saturday, September 18th, 2010 10:03
Hi guys, I just wanted to let you know that I’ve recently developed a new horizontal accordion plugin for jQuery, which is called Easy Accordion. It works in all the major borwsers and uses CSS3 for text rotation. Check it out here: http://www.madeincima.eu/blog/jquery-plugin-easy-accordion/
Cheers
Jennifer R
Monday, July 5th, 2010 14:13
These script will be very useful in premium WordPress theme :)
John Shepard
Saturday, July 10th, 2010 07:12
Thanks for featuring our portfolio site (TwoChaps.com)! Keep an eye out for our blog. It’ll be up by the end of the week.
Cheers!
Justin Clapper
Saturday, November 6th, 2010 18:42
Off the subject…but on the DJ Eric C example, the photograph of him has a kind of washed out, contrasty, white-levels-manipulated look about it. I’ve seen it before in a lot of high-end advertising work…Does anyone know how to create this effect?
tuba
Monday, June 27th, 2011 02:29
Thank you you for this Accordion menus list, really helpful for me. Thank you!
Dee
Friday, November 26th, 2010 20:52
Nice work selection. Just add a new one to the list: http://www.darlesson.com/jquery/accordion. This jQuery Accordion is very easy to implement and you can find the free source code and examples in the website above.
Imtiaz Ali
Tuesday, October 4th, 2011 15:57
Brilliant jquery slide effects,
Thanks for providing all these links.
Monica
Wednesday, March 30th, 2011 19:09
uau! how I wish to learn and do that :]
tyler
Tuesday, February 22nd, 2011 23:08
Interesting accordion solutions. I want to make something like DJ Eric C’s site. But it needs to have more then a couple options (like 30) so I think its going to take forever to load, anyone have something similar with more in it?
Lauris
Saturday, April 28th, 2012 14:20
This link not working – 13. Simple Accordion w/ CSS and jQuery :(
If someone know something similar, please share. Thanks
Dainis Graveris
Monday, April 30th, 2012 05:03
Lauris, it seems like Sohtanaka website completely disappeared! However I updated link and found that menu, cheers!