With jQuery accordion plugins you can interact with your visitors and make your content easier to consume at the same time.
Accordion scripts work a bit like content sliders but often visitors need to take action get access to the different 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 scripts without spending anything. If you want a plugin with professional support and regular updates you may need to look for a premium plugin.
Let’s take a look at the jQuery accordion plugins
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.
ggAccordion A Responsive jQuery Plugin
ggAccordion is a responsive and simple jQuery collapsible accordion extension that comes with features such as horizontal and vertical orientation, different color schemes, stylish accordion navigation and accordion slider. It is packed with the robust API with Ajax content loading for the navigation items and collapsible panel.
This plugin features semantic CSS 3 and HTML 5, responsive and touch friendly, horizontal/vertical slider accordion, more than 10 skins and examples, easy customization, Font Awesome icons, touch friendly navigation menu accordion, API and Ajax content loading and Twitter Bootstrap compatibility.
This plugin is fully supported by its author. They provide limited support through an email contact form. The supported items include availability of its author to respond to questions, reply to technical questions about the plugin features, help on 3rd party assets and assistance with reported issues and bugs.
WP Responsive FAQ with Category
If you want to add a responsive FAQ page quickly and easily, you can use WP Responsive FAQ with Category. This extension is capable of being used as jQuery UI Accordion. The WP FAQ Pro will allow you to incorporate, display and manage FAQ on your website. It is created using custom post type.
The main features of this plugin include 15 predefined FAQ designs, multipurpose FAQ OR accordion, Visual Composer page builder extension, WooCommerce compatibility, which will allow you to add WooCommerce Product FAQ easily. You can display FAQ category wise, specific FAQ, specific category FAQ, FAQ in a particular order with drag and drop features, order by shortcode and order parameters, a couple of FAQ toggle icon arrow or plus, robust shortcode parameters and more.
BWL Searchable Accordion jQuery Plugin
This is a unique responsive jQuery accordion that is integrated with content search option, 16 animations, content search option, RTL support and comprehensive configuration features. It will provide you with an excellent way of creating animated and responsive accordions that are best for your website. The plugin also comes with well commented jQuery code as well as a valid HTML 5 markup that will allow you to implement code and customize easily. The pack comes with LESS files to give you to ability to create an infinite number of themes with just a few color changes.
This plugin is created using the best jQuery coding practices. CSS 3 animation is used to provide a stunning accordion layout. It will work flawlessly with Bootstrap and with other responsive grid system and Bootstrap.
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.
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)
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
Sonny M. Day is a passionate SEO and web design enthusiast who loves photography, mountain climbing, snorkeling and dirt bike riding.