
12 jQuery Accordions
Collection of free vertical and horizontal jQuery accordion examples and plugins.
Update of January 2018 collection. 7 new items.
Related Articles
Table of Contents:
jQuery Accordion Examples
Links
Made with
- HTML / CSS / JS
About a code
Simple Sliding Accordion
Simple vertical sliding accordion with little jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Accordion Slider
Simple horizontal jQuery accordion slider.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Image Accordions
Image accordions demo with swiper.js
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js, swiper.css, swiper.js
Links
Made with
- HTML (Pug) / CSS (Sass) / JS
About a code
Accordion With Close Button
This is a simple example of how you can create an accordion from a regular HTML tag and a pair of jquery lines. We often resort to using complex patterns and writing long code when creating sliders and accordions, completely forgetting that there are very simple ways to solve these problems. Here you do not need to be well versed in the code to stylize it and add animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Accordion with dt & dd tags.
jQuery accordion using definition lists.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js, font-awesome.css
Links
Made with
- HTML / CSS / JS
About a code
CSS Animation for jQuery Accordion
Accordion for meteo application in jQuery with CSS animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js, font-awesome.js
Links
Made with
- HTML / CSS / JS
About a code
Accordion Menu
Hamburger slide accordion menu with jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
jQuery Accordion Plugins
Links
Made with
- HTML / CSS / JS
About a code
Arai Accordion
HTML, CSS and JS accordion UI-component for scalable projects. User-friendly and accessible: WAI ARIA 1.1 compliant.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Links
Made with
- HTML / CSS / JS
About a code
Simple jQuery Tabs and Accordion
A lightweight script to active jquery tabs and accordion on you theme.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Links
Made with
- HTML / CSS / JS
About a code
Ziehharmonika
A lightweight jQuery accordion plugin.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Links
Made with
- HTML / CSS / JS
About a code
Simple Jquery Multi Accordion
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js, bootstrap.css
Links
Made with
- JS
About a code
jQuery Accessible Accordion System
This jQuery plugin will transform a simple list of hx
and div
’s into a fantastic-shiny accordion system, using ARIA.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
Links
Made with
- HTML / CSS / JS
About a code
jQuery Accordion
Responsive, CSS powered, jQuery accordion plugin. Jquery Accordion uses CSS transitions to animate opening/closing with a fallback to jQuery's animate when CSS transitions are not supported. It takes little configuration or code to use it on your project.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js