Collection of free vertical and horizontal jQuery UI accordion examples and plugins from Codepen and GitHub. Update of October 2020 collection. 14 new items

Related Articles

  1. CSS Accordions
  2. Bootstrap Accordions
  3. React Accordions

Table of Contents:

  1. jQuery Accordion Examples
  2. jQuery Accordion Plugins

jQuery Accordion Examples

Author

  • Niko

Made with

  • HTML / CSS / JS

About a code

jQuery Accordion with Arrow (No Bootstrap)

Simple but useful.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Marlon

Made with

  • HTML / CSS / JS

About a code

Dropdown/Accordion

Animated accordion in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • John Hubler

Made with

  • HTML / CSS / JS

About a code

Custom Accordion for Right

jQuery custom accordion with Material Design Iconic font.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: material-design-iconic-font.css

Author

  • Jacob Collins

Made with

  • HTML / CSS / JS

About a code

jQuery Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Radoslav

Made with

  • HTML / CSS / JS

About a code

Accordion Scroll Top

Accordion with scroll animation in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: ionicons.css

Author

  • Ahmet Aksungur

Made with

  • HTML / CSS / JS

About a code

Accordion and Google Schema

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Edu Lazaro

Made with

  • HTML / CSS / JS

About a code

jQuery Accordion Styles

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • rajeshdn

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: -

Author

  • Yusuke Saio

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: -

Author

  • januaryofmine

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: swiper.css, swiper.js

Author

  • Andrej Sharapov

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: -

Author

  • Shaun MacDougall

Made with

  • HTML / CSS (SCSS) / JS

About a code

Simple Responsive jQuery Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Gabriela Johnson

Made with

  • HTML / CSS / JS

About a code

Responsive jQuery Accordion

A responsive jQuery accordion that allows the user to navigate from form to form by clicking on tabs, using the arrow keys and clicking on the provided arrow buttons. Created using jQuery and Bootstrap.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, bootstrap.css

Author

  • Halida Astatin

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: font-awesome.css

Author

  • Gab Shirohige

Made with

  • HTML / CSS (SCSS) / JS

About a code

CSS-JS Multi-Level Accordion

A multi-level CSS and JS (jQuery) accordion. This has the feature to pre-open a list group on initial page load, by simply adding the is-open class to the list item that has has-children class. HTML and CSS are written using the BEM syntax.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Sergio

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: font-awesome.js

Author

  • duke

Made with

  • HTML / CSS / JS

About a code

Accordion

jQuery accordion menu.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • James Thomas Almond

Made with

  • HTML / CSS (SCSS) / JS

About a code

jQuery Accordion Navigation Menu

A reusable jQuery accordion navigation menu, works with any amount of categories and subcategories.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Anya Melnyk

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

Author

  • Johan Mouchet

Made with

  • HTML / CSS (SCSS) / JS

About a code

4 Lines jQuery Accordion

Simple jQuery accordion.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Paweł Targoński

Made with

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

About a code

3D Accordion

Simple jQuery accordion with 3D folding paper effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mohan Khadka

Made with

  • HTML / CSS / JS

About a code

Accordion Profile

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Vikas Verma

Made with

  • HTML / CSS / JS

About a code

jQuery Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Jeremy Hawes

Made with

  • HTML / CSS (Sass) / JS

About a code

Sassy Accordion

Simple CSS only accordion built with Sass primarily for dynamic color scheming.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, bootstrap.js, lastoftype.js

Author

  • Derek Palladino

Made with

  • HTML / CSS / JS

About a code

jQuery (UI-Less) Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jon Stuebe

Made with

  • HTML / CSS (SCSS) / JS

About a code

Simple Sass/jQuery Accordion

CSS3/Sass/jQuery accordion that has some simple animations with arrows all done in CSS (sliding and click states done with jQuery).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

jQuery Accordion Plugins

Author

  • Davide Trisolini

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: -

Author

  • Thitithan Atthakasem

Made with

  • HTML / CSS / JS

About a code

Ziehharmonika

A lightweight jQuery accordion plugin.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Haris Hasan Khan

Made with

  • HTML / CSS / JS

About a code

Simple Jquery Multi Accordion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css

Author

  • Nicolas Hoffmann

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: -

Author

  • Victor Fernandez

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: -