Collection of free vertical and horizontal jQuery UI accordion code examples and plugins from Codepen and GitHub. Update of September 2021 collection. 2 new items.
Related Articles
- CSS Accordions
- Bootstrap Accordions
- React Accordions
- Tailwind Accordions
- HTML <details> & <summary> with CSS
Table of Contents:
jQuery Accordion Examples
Links
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
Links
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
Links
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
Links
Made with
- HTML / CSS / JS
About a code
jQuery Accordion
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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
Links
Made with
- HTML / CSS / JS
About a code
Accordion and Google Schema
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
jQuery Accordion Styles
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
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: -
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: -
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: 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 (SCSS) / JS
About a code
Simple Responsive jQuery Accordion
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
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
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: font-awesome.css
Links
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
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: font-awesome.js
Links
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
Links
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: -
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
Links
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: -
Links
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: -
Links
Made with
- HTML / CSS / JS
About a code
Accordion Profile
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS / JS
About a code
jQuery Accordion
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
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
Links
Made with
- HTML (Haml) / CSS (Less) / JS
About a code
Accordion Multi Menu
Simple, stylish and modern vertical accordion menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS / JS
About a code
jQuery (UI-Less) Accordion
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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
Links
Made with
- HTML / CSS / JS
About a code
Accordion with jQuery
Simple accordion with jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
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: -
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: -
Links
Made with
- HTML / CSS / JS
About a code
Simple Jquery Multi Accordion
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: 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: -
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: -