25 Great jQuery Accordion Plugins and Tutorials

25 Great jQuery Accordion 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 jquery 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!

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

MORE INFO | DEMO – by MadeinCima (Free Plugin)

Tabs + Accordion

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

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.

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.

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.

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.

MORE INFO | DEMO – by CodeCanyon (Premium Plugin)

Accordion Madness

A helpful tutorial on how to make an accordion menu.

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.

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”.

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.

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.

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

jQuery Accordion Menu

This tutorial will take you through the creation of a jQuery 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.

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.

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.

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.