30 jQuery Accordion Menus, Tutorials And Best Examples
Daniels MekšsAccordion 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!
Accordionza – jQuery Plugin
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; collapseable 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.
- Progressive enhancement — All content is still viewable without JavaScript enabled.
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
Check out the demo here.
2. jQuery UI Demo
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. Stupid Simple jQuery Accordion Menu
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.
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.
4. Making Accordion Menu Using jQuery
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.
5. jQuery Accordion Menu
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.
6. jQuery Examples – Horizontal Accordion
Learn how to create easy horizontal accordion menu.
7. jQuery – Horizontal Accordion
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.
8. 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. View demo and download source too.
9. Accordion Menu Screencast Tutorial
Learn how to build a simple, unobtrusive, accordion style menu using basic events and animations.
10. Regular and Hover Accordion Menus
See example of hover accordion menu, learn how to create it and download the plugins.
11. Haccordion – Simple Horizontal Accordion Plugin for jQuery
Simple and fast plugin for creating simple horizontal accordion menus. Demo included.
12. Exactly How to Create a Custom jQuery Accordion
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.
13. Simple Accordion w/ CSS and jQuery
Detailed tutorial how to create great looking accordion menu.
14. Accordion Madness
One of the options how to create accordion menu.
15. A Simple and Beautiful jQuery Accordion Tutorial
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.
16. 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. Demo and code included.
17. Create Simplest Accordion Menu using jQuery
Another simple tutorial how to create standard accordion menu. View demo and download files.
18. 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. For more information visit leigeber.com.
19. Javascript Accordion Menu Wizard
Javascript Accordion Menu is an image based site navigation menu. Scriptocean Accordion Menu Wizard supports horizontal and vertical accordion menus. Download here.
20. Horizontal JavaScript Accordion 1kb
This versatile 1kb horizontal accordion script can be used for menus, images, presentation content and more.
Examples
21. Alex Cohaniuc Portfolio
22. Deluge Studios
23. Rzmota
24. Screenfluent
25. Artisanmedia
26. Exotics RTC
27. Two Chaps
28. Ten 18 Photography
29. We Are Lighthouse
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!
For Further Reading:
Did you enjoy this article and found it useful?
Get even more from us:
febin
Posted 253 days ago 25This may also helpfull for web developers http://adf.ly/2hkIE
Algates
Posted 260 days ago 24now only i see this scripts its help to reduce loading , and increase site performance so i am try to use it here after thanks for inspirations
MHD
Posted 277 days ago 23Greate List…
Thanks for sharing jQuery Accordion Menus Tutorials …
Alex
Posted 285 days ago 22Awesome script!
Thanks for sharing!
BoomZik
Posted 312 days ago 21Thanks it’s greet and helpful!
Aamir Afridi
Posted 316 days ago 20How about 1 line of accordion ;)
http://jsfiddle.net/aamir/4Crst/1/
tuba
Posted 331 days ago 19Thank you you for this Accordion menus list, really helpful for me. Thank you!
Monica
Posted 419 days ago 18uau! how I wish to learn and do that :]
tyler
Posted 455 days ago 17Interesting 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?
Nikki
Posted 473 days ago 16Hi everyone,
I created a horizontal accordion plugin for jQuery. It looks pretty neat – it makes good use of CSS3 – but it’s designed to be lightweight, so it doesn’t use any background images. You can find it here: http://nicolahibbert.com/demo/liteAccordion/
Thanks!
Dee
Posted 543 days ago 15Nice 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.
Moataz elsayed
Posted 545 days ago 14Great collection ..thank you :)
Justin Clapper
Posted 563 days ago 13Off 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?
surf shop
Posted 585 days ago 12Such a great list of menus! I’m going to have to use one of them for my site. Thanks again for posting this.
Min Thu
Posted 594 days ago 11Some accordion menus look beautiful but they are not good for touch-based input devices. :)
Deryck
Posted 601 days ago 10I do like the accordion quite a lot. I used one from dynamic drive on my site http://thecooker.net (just incase there’s not already enough choice above the script is here http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm ). I’ve also found the Jquery for Designers site very helpful in the past.
Andrea Cima Serniotti
Posted 613 days ago 9Hi 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
Steven
Posted 618 days ago 8Great collection of Accordion menus.
gen
Posted 663 days ago 7Greate List….
Thanks for sharing jQuery Accordion Menus Tutorials …..
John Shepard
Posted 683 days ago 6Thanks 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!
Dsign Buzz
Posted 684 days ago 5Wonderful round-up of jQuery tutorials, I’ve always wanted to learn jQuery but I never find the time.
George Brountzas
Posted 687 days ago 4I am learning JQuery now and I found your resources very helpfull! Thank you
Jennifer R
Posted 687 days ago 3These script will be very useful in premium WordPress theme :)
Nikunj Tamboli
Posted 688 days ago 2Need 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.
Thiago
Posted 688 days ago 1Thanks for posting, with jQuery is possible get wonderful results !