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!
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.
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 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.
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)
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.
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.
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.
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.
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.
Accordion Gallery is a lightweight jQuery plugin, providing a unique and innovative image gallery, with rich effects, semantic markup, and accessibility in mind.
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.
Tabs + Accordion
Tabs + Accordion is a jQuery plugin that simplifies creating responsive tabs and accordions.
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.
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.
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.
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.
Exactly How to Create a Custom jQuery Accordion
This tutorial will show you how to build a custom accordion that is more “bandwidth efficient”.
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.
Stupid Simple jQuery Accordion Menu
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.
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.
A Simple and Beautiful jQuery Accordion Tutorial