Collection of free vertical and horizontal jQuery accordion examples and plugins. Update of October 2019 collection. 6 new items.

  1. Accordions CSS
  2. Bootstrap Accordions
  3. React Accordions
  1. jQuery Accordion Examples
  2. jQuery Accordion Plugins

jQuery Accordion Examples

Creator

  • Marlon

Programming language

  • HTML / CSS / JS

Information a code

Dropdown/Accordion

Animated accordion in jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Creator

  • John Hubler

Programming language

  • HTML / CSS / JS

Information a code

Custom Accordion for Right

jQuery custom accordion with Material Design Iconic font.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: material-design-iconic-font.css

Creator

  • Jacob Collins

Programming language

  • HTML / CSS / JS

Information a code

jQuery Accordion

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Radoslav

Programming language

  • HTML / CSS / JS

Information a code

Accordion Scroll Top

Accordion with scroll animation in jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: ionicons.css

Creator

  • Ahmet Aksungur

Programming language

  • HTML / CSS / JS

Information a code

Accordion and Google Schema

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Creator

  • Edu Lazaro

Programming language

  • HTML / CSS / JS

Information a code

jQuery Accordion Styles

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • rajeshdn

Programming language

  • HTML / CSS / JS

Information a code

Simple Sliding Accordion

Simple vertical sliding accordion with little jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Yusuke Saio

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Accordion Slider

Simple horizontal jQuery accordion slider.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Creator

  • januaryofmine

Programming language

  • HTML / CSS (SCSS) / JS

Information a code

Image Accordions

Image accordions demo with swiper.js

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, swiper.css, swiper.js

Creator

  • Andrej Sharapov

Programming language

  • HTML (Pug) / CSS (Sass) / JS

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Halida Astatin

Programming language

  • HTML / CSS / JS

Information a code

Accordion with dt & dd tags.

jQuery accordion using definition lists.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, font-awesome.css

Creator

  • Sergio

Programming language

  • HTML / CSS / JS

Information a code

CSS Animation for jQuery Accordion

Accordion for meteo application in jQuery with CSS animation.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, font-awesome.js

Creator

  • Anya Melnyk

Programming language

  • HTML / CSS / JS

Information a code

Accordion Menu

Hamburger slide accordion menu with jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

jQuery Accordion Plugins

Creator

  • Davide Trisolini

Programming language

  • HTML / CSS / JS

Information a code

Arai Accordion

HTML, CSS and JS accordion UI-component for scalable projects. User-friendly and accessible: WAI ARIA 1.1 compliant.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Creator

  • Mohammad Limon

Programming language

  • HTML / CSS / JS

Information a code

Simple jQuery Tabs and Accordion

A lightweight script to active jquery tabs and accordion on you theme.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Creator

  • Thitithan Atthakasem

Programming language

  • HTML / CSS / JS

Information a code

Ziehharmonika

A lightweight jQuery accordion plugin.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Creator

  • Haris Hasan Khan

Programming language

  • HTML / CSS / JS

Information a code

Simple Jquery Multi Accordion

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js, bootstrap.css

Creator

  • Nicolas Hoffmann

Programming language

  • JS

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Creator

  • Victor Fernandez

Programming language

  • HTML / CSS / JS

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js