Collection of free HTML and CSS accordion code examples: horizontal, vertical, simple, responsive, animated, etc. Update of March 2020 collection. 14 new examples.
Table of Contents
Related Articles
- CSS Accordion Menus
- Bootstrap Accordions
- jQuery Accordions
- React Accordions
- HTML <details> & <summary> with CSS
Horizontal Accordions
Links
Made with
- HTML / CSS
About a code
Responsive Accordion Slider
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS-only Line Bar Navigation
Budging bars. CSS-only line bar navigation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Image Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About the code
Accordion Gallery
CSS responsive accordion gallery with zoom animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (Less)
About the code
Pure CSS Accordion
Pure CSS horizontal accordion with transform and box-shadow effects.
Links
Made with
- HTML / CSS
About the code
Accordion Image Gallery
CSS accordion image gallery. Less code and great animation effect.
Links
Made with
- HTML
- CSS/SCSS
About the code
CSS3 Accordion Slider With Transitions And Flexbox
CSS3 accordion with 5 different effects.
Expanding Horizontal Accordion In React
A quick alternative to the standard 'Accordion' pattern, built completely with React.
Made by Sean
January 7, 2017
Pure CSS Accordion
Image accordion only with CSS and color filters using the rgba() function.
Made by Eduardo Moreno
November 26, 2016
Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Horizontal Accordion
Full page horizontal accordion.
Responsive Accordion
Responsive accordion (background images).
Made by Michael Ferry
October 1, 2015
Accordion Navigation
No javascript, no flexbox.
Made by Oliver Knoblich
August 25, 2015
Flexbox Accordion
Simple horizontal flexbox accordion.
Made by Arjan Jassal
December 28, 2014
Vertical Accordions
Links
Made with
- HTML / CSS
About a code
CSS Only Semantic Animated Accordion
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Accordion
A demonstation of what you can do with the details and summary elements.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Native HTML Details Element Styled via CSS
Implementation of an accordion-like component using only the details/summary native HTML element and CSS for styling. Best results can be seen in Chrome or Blink-based browsers. Firefox and others have decent results as well, but they could be improved creating alternative open/close icons.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Accordion Flexbox
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Accordion with Pure CSS and HTML
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Accordion
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: ionicons.css
Links
Made with
- HTML / CSS
About a code
Accordion without Using JavaScript
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
HTML CSS Accordion without JavaScript / jQuery
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Accordion Menu With HTML & CSS Only
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About a code
Simple accordion Menu with HTML And CSS
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Accordion Menu HTML CSS Only
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About a code
Pure HTML CSS Accordion
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Collapsing Accordion Pure CSS
This example will collapse without the need for any kind of JavaScript.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS (SCSS)
About a code
Animated Accordion
Animated accordion with HTML details element.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JavaScript
About the code
Accordion Content
Air quotes card mode grid and accordion content.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: zinggrid.js
Links
Made with
- HTML / CSS (SCSS)
About the code
Pure SCSS Accordion Tabs
Accordion tabs without JS. This tabs have responsive design.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (Post CSS)
About the code
CSS Vertical Accordion
CSS vertical accordion for frequently asked questions.
Links
Made with
- HTML/Pug
- CSS/SCSS
- JavaScript/Babel (Vue.js)
About the code
Accordions Pls
Vertical accordion with HTML, CSS and JS (Vue.js).
Links
Made with
- HTML
- CSS
About the code
Accordion With Input Edit
Pure CSS accordion with input edit.
Links
Made with
- HTML / CSS (SCSS)
About the code
Animated CSS Accordion
Animated collapse/expend component.
Links
Made with
- HTML
- CSS/SCSS
- JavaScript
About the code
Accordion In Js
Accordion in vanilla JS with CSS transition.
Links
Made with
- HTML
- CSS
- JavaScript
About the code
Accordion 2.0
Vertical accordion with HTML, CSS and JS.
Links
Made with
- HTML
- CSS (Ionicons.css)
- JavaScript (jQuery.js)
About the code
Accordion
Accordion JS functionality allowing you to set the animation speed of the toggle. You also have the option of being able to have just one accordion item open at any one given time.
Links
Made with
- HTML
- CSS/SCSS
- JavaScript (jQuery.js)
About the code
ARIA Accessible Accordion
A simple accordion that can be used by both mouse and keyboard-only users.
Links
Made with
- HTML / CSS / JavaScript
About the code
FAQ Accordion
Minimal FAQ accordion made with little vanilla JavaScript.
Links
Made with
- HTML
- CSS/SCSS (Animate.css)
- JavaScript (jQuery.js)
About the code
Basic Accordion
Basic accordion in HTML, CSS and JS.
Simple Accordion Concept
HTML, CSS and JavaScript simple accordion concept.
Made by Kyle Brumm
March 24, 2017
Funky Pure CSS Accordion
Another pure CSS UI Piece here using radio buttons for the active states.
Made by Jamie Coulter
March 19, 2017
CSS Accordion
A simple solution for creating a pure CSS accordion with a CSS transition on the panel height, achieved by setting "max-height" of the accordion panel instead of "height".
Made by Matthew Scott
October 28, 2016
3D Accordion
Simple accordion with 3D folding paper effect in HTML, CSS and JavaScript.
Made by Pawe Targoski
June 13, 2016
Links
Made with
- HTML
- CSS (Bootstrap.js)
- JavaScript (jQuery.js, Bootstrap.js)
About the code
Material Design Accordion - Bootstrap 3
Bootstrap 3 collapse redesigned to match Material Design concept with ability to add icons on show/hide with smooth transition by adding an active class to the panel heading on show/hide.
Flat Accordion
Flat accordion in HTML, CSS and JavaScript.
Made by Soufiane Abid
April 12, 2016
Pure HTML And CSS Accordion
Created and designed (in browser) a pure HTML and CSS expandable accordion for fun.
Made by Chris Ota
January 21, 2016
CSS Responsive Animated Accordion
HTML and CSS responsive animated accordion.
Made by Chris Wright
January 19, 2016
Links
Made with
- HTML / CSS (SCSS)
About a code
Pure CSS Accordion
Version 2.0: Redesigned with SCSS and smooth animation. Added a tab "close" in "open one" option to close other tab. Acordeon made with just CSS. Based on checkbox input + label trick to active tabs.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Swanky Little Accordian List
Here's another little CSS creation using the 'Label for' trick.
Made by Jamie Coulter
February 22, 2015
CSS + HTML Only Accordion Element
Read the copy in the accordion sections for some info about how this was made.
Made by Alex Bergin
April 18, 2014
Responsive Animated SCSS Accordion
Responsive animated SCSS accordion with some text-background-clipping and linear-background overlay.
Made by MrPirrera
December 11, 2014