30+ jQuery Accordions - Free Code + Demos
Collection of 30+ jQuery Accordions. All items are 100% free and open-source.
1. Simple Sliding Accordion
Author: rajeshdn (cool_lazyboy)
Links: Source Code / Demo
Created on: September 9, 2019
Made with: HTML, CSS, JS
2. Accordion Slider
Author: Yusuke Saio (saio-th)
Links: Source Code / Demo
Created on: September 12, 2019
Made with: HTML, SCSS, JS
3. Image Accordions
Image Accordions Demo with Swiper.js
Author: januaryofmine (januaryofmine)
Links: Source Code / Demo
Created on: March 24, 2019
Made with: HTML, SCSS, JS
Tags: image accordions, swiper.js, animation, scroll event, flex
4. 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 problem...Read More
Author: Andrej Sharapov (andrejsharapov)
Links: Source Code / Demo
Created on: March 17, 2019
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
5. Accordion With Dt & Dd Tags
Accordion using definition lists. Trending Words taken from Dictionary.com.
Author: Halida Astatin (halidaa)
Links: Source Code / Demo
Created on: June 4, 2018
Made with: HTML, CSS, JS
Tags: cpc-dt-dd, codepenchallenge, accordion, faq, dribbble
6. App Meteo Animation Css Ease
Author: Sergio (SofiaSergio)
Links: Source Code / Demo
Created on: March 7, 2018
Made with: HTML, CSS, JS
Tags: animation, app, layout, css, mouseover
7. CSS Only Vertical Accordion Menu
Author: Eriksen (eriksenlezama)
Links: Source Code / Demo
Created on: January 30, 2018
Made with: HTML, CSS
8. Arai Accordion
HTML, CSS and JS accordion UI-component for scalable projects.
Links: Source Code / Demo
Created on: April 17, 2017
9. Ziehharmonika
A jQuery accordion plugin
Links: Source Code / Demo
Created on: March 1, 2017
10. Simple JQuery Multi Accordion
Simple Jquery Multi Accordion
Links: Source Code / Demo
Created on: April 20, 2017
11. JQuery Accessible Accordion System
jQuery Accessible Accordion System, using ARIA
Links: Source Code / Demo
Created on: April 23, 2015
12. JQuery Accordion
👆 Responsive, CSS powered, jQuery accordion plugin.
Links: Source Code / Demo
Created on: June 22, 2014
13. JQuery Accordion
jquery accordion
Author: Vikas Verma (vikasverma93)
Links: Source Code / Demo
Created on: December 8, 2014
Made with: HTML, CSS, JS
Tags: jquery, accordion
14. Accordion Menu Using Jquery
Hello, This example to how to use Accordion menu in jquery and some css effect > Thank you <
Author: Noor AL-Hassan (N00R_alhassan1)
Links: Source Code / Demo
Created on: October 26, 2014
Made with: HTML, CSS, JS
Tags: accordion menu in jquery
15. Simple Responsive JQuery Accordion
Reason for build As a response to not finding anything that I needed, I thought I'd build one from scratch. Insperation https://dribbble.com/shots/1257916-Freebie-Flat-Accordion?utm_source=Clipboard_Shot&utm_campaign=PSDchat&utm_content=Freebie%3A%20Flat%20Accordion&utm_medium=Social_Sh...Read More
Author: Shaun MacDougall (shaunmac)
Links: Source Code / Demo
Created on: January 14, 2019
Made with: HTML, SCSS, JS
Tags: es6, jquery, accordion, arrow function, scss
16. JQuery Accordion Navigation Menu
A reusable jQuery accordion navigation menu, works with any amount of categories and subcategories
Author: James Thomas Almond (jamestalmond)
Links: Source Code / Demo
Created on: February 9, 2017
Made with: HTML, SCSS, JS
Tags: jquery, accordion, menu, javascript, mobile
17. Simple Expanding Content Area Accordion
A simple CSS and JQuery accordion that expands a content area from a defined starting height to an end height. The end height is automatically detected based on the height of the hidden content. Multiple instances can be used within one page with no changes to code.
Author: James Marett (OastOne)
Links: Source Code / Demo
Created on: August 11, 2020
Made with: HTML, CSS, JS
Tags: expanding, transition, readmore, accordion, simple
18. A Simple JQuery Accordion Caret
This accordion have a caret and this change when accordeon is active.
Author: Helen (haitch)
Links: Source Code / Demo
Created on: February 5, 2020
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: dropdown, accordion, caret
19. Simple Accordion
Author: RusWebNov (ruslanvybor)
Links: Source Code / Demo
Created on: August 5, 2020
Made with: HTML, CSS, JS
Tags: accordion, jquery, css, html
20. Super Simple JQuery Accordion Snippet
Author: Qusay Saad (qusaysaad)
Links: Source Code / Demo
Created on: October 2, 2016
Made with: HTML, CSS, JS
21. Vertical Accordion (HTML5 + JQuery)
I created a vertical accordion with jQuery. The idea was to one static column for a menu or title and the rest to be interactive. Next update: Make content show/hide in opening and closing Responsive Bootstrap/SASS edition
Author: Maria Padilla (mariapadilla)
Links: Source Code / Demo
Created on: October 29, 2014
Made with: HTML, CSS, JS
Tags: jquery, html5, vertical accordion, accordion
22. Vertical Accordion Menu Using JQuery And CSS3
A sleek vertical accordion menu for your next website/app. The headings use Font Awesome icon font. CSS3 gradients, transitions, and shadows have been used in the demo along with minimalistic use of jQuery for sliding the link lists. Degrades gracefully upto IE8. Works in all major brows...Read More
Author: Arkev (arkev)
Links: Source Code / Demo
Created on: April 12, 2013
Made with: HTML, CSS, JS
Tags: menu, jquery, css3
23. Fluid Accordion To Vertical Tabs
Transition from accordion to vertical tabs. Accordion has clickable h2s with scroll-to functionality when < 480px. At >481px vertical tabs are used for toggling and only the active panel is shown. Work in progress... A few accessibility issues that need to be fixed: -alternative to dis...Read More
Author: Jacob Rotton (jrotton)
Links: Source Code / Demo
Created on: December 13, 2012
Made with: HTML, CSS, JS
Tags: accordion, tabs
24. Css, JQuery Vertical Full Screen Accordion
Author: kaleem (mahesarkaleem)
Links: Source Code / Demo
Created on: September 1, 2018
Made with: HTML, SCSS, JS
25. Horizontal Image Accordion JQuery
Author: Ragnarok (Ragnarok)
Links: Source Code / Demo
Created on: January 19, 2017
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
26. Accordion Slider
Accordion Slider with GSAP and jQuery
Author: Garrett (gnevin)
Links: Source Code / Demo
Created on: January 15, 2017
Made with: HTML, CSS, JS
Tags: slider, gsap, greensock, tweenmax, accordion
jQuery Accordion Examples
1. Simple Sliding Accordion
Author: rajeshdn (cool_lazyboy)
Links: Source Code / Demo
Created on: September 9, 2019
Made with: HTML, CSS, JS
2. Accordion Slider
Author: Yusuke Saio (saio-th)
Links: Source Code / Demo
Created on: September 12, 2019
Made with: HTML, SCSS, JS
3. Image Accordions
Image Accordions Demo with Swiper.js
Author: januaryofmine (januaryofmine)
Links: Source Code / Demo
Created on: March 24, 2019
Made with: HTML, SCSS, JS
Tags: image accordions, swiper.js, animation, scroll event, flex
4. 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 problem...Read More
Author: Andrej Sharapov (andrejsharapov)
Links: Source Code / Demo
Created on: March 17, 2019
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
5. Accordion With Dt & Dd Tags
Accordion using definition lists. Trending Words taken from Dictionary.com.
Author: Halida Astatin (halidaa)
Links: Source Code / Demo
Created on: June 4, 2018
Made with: HTML, CSS, JS
Tags: cpc-dt-dd, codepenchallenge, accordion, faq, dribbble
6. App Meteo Animation Css Ease
Author: Sergio (SofiaSergio)
Links: Source Code / Demo
Created on: March 7, 2018
Made with: HTML, CSS, JS
Tags: animation, app, layout, css, mouseover
7. CSS Only Vertical Accordion Menu
Author: Eriksen (eriksenlezama)
Links: Source Code / Demo
Created on: January 30, 2018
Made with: HTML, CSS
jQuery Accordion Plugins
1. Arai Accordion
HTML, CSS and JS accordion UI-component for scalable projects.
Links: Source Code / Demo
Created on: April 17, 2017
2. Ziehharmonika
A jQuery accordion plugin
Links: Source Code / Demo
Created on: March 1, 2017
3. Simple JQuery Multi Accordion
Simple Jquery Multi Accordion
Links: Source Code / Demo
Created on: April 20, 2017
4. JQuery Accessible Accordion System
jQuery Accessible Accordion System, using ARIA
Links: Source Code / Demo
Created on: April 23, 2015
5. JQuery Accordion
👆 Responsive, CSS powered, jQuery accordion plugin.
Links: Source Code / Demo
Created on: June 22, 2014
More Awesome Lists:
Share: