33 Accordions CSS
Collection of free HTML and CSS accordion code examples: horizontal, vertical, simple, animated, etc. Update of June 2018 collection. 3 new examples.
Table of Contents
Related Articles
Horizontal Accordions
Collection of free HTML and CSS horizontal accordions. (9 items).
About the code
Accordion Gallery
CSS responsive accordion gallery with zoom animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About the code
Pure CSS Accordion
Pure CSS horizontal accordion with transform and box-shadow effects.
About the code
Accordion Image Gallery
CSS accordion image gallery. Less code and great animation effect.
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
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
Collection of free HTML and CSS vertical accordions. (21 items).
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
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: -
About the code
CSS Vertical Accordion
CSS vertical accordion for frequently asked questions.
About the code
Accordions Pls
Vertical accordion with HTML, CSS and JS (Vue.js).
About the code
Accordion With Input Edit
Pure CSS accordion with input edit.
About the code
Animated CSS Accordion
Animated collapse/expend component.
About the code
Accordion In Js
Accordion in vanilla JS with CSS transition.
About the code
Accordion 2.0
Vertical accordion with HTML, CSS and 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.
About the code
ARIA Accessible Accordion
A simple accordion that can be used by both mouse and keyboard-only users.
About the code
FAQ Accordion
Minimal FAQ accordion made with little vanilla JavaScript.
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
Author
- Shehab Eltawel
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
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
