25 Great jQuery Accordion Plugins and Tutorials

December 23, 2012 · 11 comments

by Sonny M. Day

jquery-plugins-and-tutorials

With jQuery accordion plugins you can get the attention of visitors and save space e.g. on the front page at the same time. Accordion scripts work a bit like content sliders but often visitors need to take action get access to the hidden content elements. The way accordions are typically designed makes them great for giving users a quick overview but they work best if the number of content elements is relatively low – basically to limit the number of tabs.

In this article, you will find a collection of useful jQuery accordion plugins and some tutorials you can use to improve your website. The majority of these items are free so you can grab some cool accordion scrips without spending anything. If you want a plugin with professional support and regular updates you may need to look for a premium plugin. It wasn’t that easy for me to find a lot of great jQuery accordion plugins around….so the supply is not as high as for e.g. sliders and jQuery menu plugins. If you know a script we should add to the article then please share this in the comment section. We are also happy to hear your thoughts and feedback. Enjoy!


ElegantThemes
ThemeForest

Advertisement
Disclosure: Please note that some of the links below are affiliate links and I will earn a commission if you purchase through those links (at no extra cost to you). I recommend that you do your own independent research before purchasing any product or service. This article is not a guideline, a recommendation or endorsement of specific products.


ElegantThemes
ThemeForest

Advertisement

zAccordion

zAccordion is an easily customizable horizontal jQuery slider with bouncing animation effect that does the job of giving you a nice image display slider.

zaccordion

MORE INFO | DEMO by Nate Armagost (Free Plugin/Tutorial)

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.

classic-accordion

MORE INFO  |  DEMO by CodeCanyon (Premium Plugin)

liteAccordion – a horizontal accordion plugin for jQuery

liteAccordion is so called because the minified JS source only weighs 6kb. If you gzip the minified JS, you can get the file size down to 2kb! You can use it anything you like! Text, images, video – anything you can put in a div, you can put in a slide.

liteaccordion

MORE INFO | DEMO by Nicola Hibbert (Free Plugin)

Javascript Accordion Menu Wizard

Javascript Accordion Menu is an image based site navigation menu that supports both horizontal and vertical orientations. It features Title and description text for each image; A link for each image; transparency of the text area and Autoplay functionality.

javascript-accordion-menu-wizard

MORE INFO | DEMO by Scriptocean (Free Plugin)

Unleash jQuery Accordion Slider

Unleash is a responsive, easy to style jQuery accordion with multiple caption animations, easing methods and many more.

unleash-jquery-accordion

MORE INFO | DEMO by CodeCanyon (Premium Plugin)

Making a Fresh Content Accordion

This tutorial will show you how to make a simple, yet eye-catching accordion with the help of CSS, jQuery and the easing plug-in for some fancy effects.

colorful-accordion-with-jquery

MORE INFO | DEMO by Tutorialzine (Free Plugin/Tutorial)

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.

grid-accordion

MORE INFO | DEMO by CodeCanyon (Premium Plugin)

jQuery Accordion MultiPurpose Gallery Slideshow

This powerfull gallery slideshow offers ability to display more slides than visible, with an easy scroll through navigation, making it very powerfull in displaying large collection of data. Furthermore, slides can be different sizes.

jquery-accordion-multipurpose-slideshow

MORE INFO | DEMO by CodeCanyon (Premium Plugin)

Elegant Accordion with jQuery and CSS3

This tutorial will teach you how to create an elegant accordion for content. The idea is to have some vertical accordion tabs that slide out when hovering. Here you will add some CSS3 properties to enhance the looks of the accordion.

elegant-accordion-with-jquery-and-c[1]

MORE INFO | DEMO by Tympanus (Free Plugin/Tutorial)

Accordion Gallery

Accordion Gallery is a lightweight jQuery plugin, providing a unique and innovative image gallery, with rich effects, semantic markup, and accessibility in mind.

accordion-gallery

MORE INFO | DEMO by CodeCanyon (Premium Plugin)

jQuery Accordion

This accordion widget for jQuery is a small and simple script that addresses common issues with jQuery accordions in general.

jquery-accordion

MORE INFO | DEMO by Tim Huegdon (Free Plugin/Tutorial)

jQuery Easy Accordion Plugin

Easy Accordion plugin will get your definition lists (DTs) and generate a nice and smooth horizontal accordion. You can then decide to make it a timed slideshow or leave it still.

jquery-easy-accordion-plugin

MORE INFO | DEMO by MadeinCima (Free Plugin)

Tabs + Accordion

Tabs + Accordion is a jQuery plugin that simplifies creating responsive tabs and accordions.

tabs-accordion

MORE INFO | DEMO by CodeCanyon (Premium Plugin)

jQuery UI 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.

jquery-ui-accordion

MORE INFO | DEMO by Bassistance.de (Free Plugin)

Accordionza – jQuery Plugin

Accordionza is a very flexible and lightweight jQuery accordion plugin with easy to configure effects and speed. Also it features pause on hover; autoplay and autorestart; collapseable captions; and more.

accordionza

MORE INFO | DEMO by CodeCanyon (Premium Plugin)

Vallenato

Vallenato is a super simple jQuery based accordion script. There are plenty of other great accordion scripts out there to choose from, so why use Vallenato? Well, it’s easy to implement, looks good, is flexible, and of course…it’s free.

valienato-1.0

MORE INFO | DEMO by Switchtoroyale(Free Plugin)

Dynamic Accordion Banner Rotator

This accordion menu was made in a way it could be easy adapted to any kind of project for you, you can have and do pretty much what you want with the rotator. Some of the options include click or over images action, the possibility of having any kind of button to the next and previous image or none at all, autoplay and duration, border or shadow divider and much more.

dynamic-accordion-banner-rotator

MORE INFO | DEMO by CodeCanyon (Premium Plugin)

Accordion Madness

A helpful tutorial on how to make an accordion menu.

accordion-madness

MORE INFO | DEMO by Learning jQuery (Free Plugin)

jQuery Searchable 3 Level Accordion

This plugin features up to 3 levels of nesting with nice API, configurable animation, multiple skins and more.

jquery-searcheable-accordion

MORE INFO | DEMO by CodeCanyon (Premium Plugin)

Exactly How to Create a Custom jQuery Accordion

This tutorial will show you how to build a custom accordion that is more “bandwidth efficient”.

custom-jquery-accordion[3]

MORE INFO | DEMO by NetTuts Plus (Free Plugin/Tutorial)

Vertical Sliding Accordion with jQuery

The main idea behind this accordion is to expand the accordion slices on click and show some more information. The other slices will become less opaque and squeezed. When navigating to the next slice using one navigation arrows, a new slice will slide in from the top or the bottom. Once a slice is open and the user navigates, the subsequent slice will open on slide.

vertical-sliding-accordion

MORE INFO | DEMO by Tympanus (Free Plugin/Tutorial)

Stupid Simple jQuery Accordion Menu

This is a very simple tutorial were you can learn the basics in making accordion menus. It teaches you how to code the HTML, CSS and the JavaScript to make the plugin functional as it should be.

stupid-simple-accordion-menu[3]

MORE INFO | DEMO by Ryan Stemtoski (Free Plugin/Tutorial)

jQuery Accordion Menu

This tutorial will take you through the creation of ajQuery accordion menu. There is a little twist to this: the menu contains content. Instead of it being links to multiple pages, it is a choice of what content should appear.

jquery-accordion-menu

MORE INFO | DEMO by Lateral Code (Free Plugin/Tutorial)

Grid Accordion with jQuery

This tutorial will teach you how to make a grid accordion. The Grid Accordion works with the same theory as most other accordions. Only one cell is open at a time. The big thing is that the column of the current open cell expands to a reasonable reading width.

accordion-grid-with-jquery

MORE INFO | DEMO by CSS-Tricks (Free Plugin/Tutorial)

A Simple and Beautiful jQuery Accordion Tutorial

This is an easy to follow tutorial on how to make a jQuery accordion in simple steps. It shows how the HTML, CSS and the JavaScript are coded.

create-a-simple-accordion

MORE INFO | DEMO by Queness (Free Plugin/Tutorial)

Author : Sonny Day

Sonny M. Day is a passionate SEO and web design enthusiast who loves photography, mountain climbing, snorkeling and dirt bike riding.

{ 11 comments… read them below or add one }

koushik chowdhury February 24, 2013 at 4:26 pm

how can i download this ?

Reply

annesofie February 25, 2013 at 9:53 am

Hi Koushik, in order to download one of the plugins or tutorials you need to click the link that says “more info” this will re-direct you to the homepage of the plugin/tutorial where you can download it.
Hope you succeed in downloading it.

Kind regards,
Sofie

Reply

Amatullah February 11, 2013 at 2:38 pm

Thanks for the lists accordion menu, nice collection. I like grid accordian but i thing its not free :)

Reply

Gjorgji January 22, 2013 at 12:17 pm

I need help with the liteAccordion. What I can’t figure out is how to make the selected tab bigger than the others… If anyone has any ideas as to how I can change it, please let me know. Thanks.

Reply

chris irwin November 13, 2012 at 4:26 pm

I have been battling to find good Wordpress accordions that work well for graphics and text elements. Thanks for the help here and summing up the useful info!

Reply

Li-Ann October 18, 2012 at 2:16 pm

Great & nice job: love jquery!!
Thx for sharing this with us.
Li-Ann

Reply

membro October 1, 2012 at 12:03 am

Really awesome, great job.
Thanks for share.

Reply

annesofie October 2, 2012 at 1:14 pm

Your welcome :)
Best regards,
Sofie

Reply

Zlato September 25, 2012 at 2:14 pm

Very nice tutorial. thanks

Reply

lalak September 21, 2012 at 5:54 pm

What a great collection. Thanks

Reply

graphc design agencies in phoenix September 20, 2012 at 8:58 pm

Thanks for the Tutorial. Great simple steps.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post:

Next post:


Web Analytics