Collection of free HTML and CSS accordion code examples: horizontal, vertical, simple, animated, etc.
HORIZONTAL ACCORDIONS
Collection of free HTML and CSS horizontal accordions.
ACCORDION GALLERY
CSS responsive accordion gallery with zoom animation. Made with HTML / CSS (SCSS) by Daniel Subat.
See the Pen
accordion gallery zoom animation (css, responsive) by Daniel Subat (@bbx)
on CodePen.
PURE CSS ACCORDION
Pure CSS horizontal accordion with transform and box-shadow effects. Made with HTML (Pug) / CSS (Less) by Ivan Bogachev.
See the Pen
Pure CSS accordion by Ivan Bogachev (@sfi0zy)
on CodePen.
ACCORDION IMAGE GALLERY
CSS accordion image gallery. Less code and great animation effect. Made with HTML/CSS by Stefan C.
See the Pen
Accordion Image Gallery by Stefan C. (@stefcharle)
on CodePen.
CSS3 ACCORDION SLIDER WITH TRANSITIONS AND FLEXBOX
CSS3 accordion with 5 different effects. Made with HTML/CSS/SCSS by fox_hover.
See the Pen
CSS3 accordion slider with Transitions and Flexbox by foxeisen (@foxeisen)
on CodePen.
Expanding Horizontal Accordion In React
A quick alternative to the standard ‘Accordion’ pattern, built completely with React.
Made by Sean.
See the Pen
Expanding Horizontal Accordion in React by Sean (@nevernotsean)
on CodePen.
Pure CSS Accordion
Image accordion only with CSS and color filters using the rgba() function. Made by Eduardo Moreno.
See the Pen
Pure CSS Accordion by Eduardo Moreno (@emoreno911)
on CodePen.
HORIZONTAL ACCORDION
Full page horizontal accordion. Made with HTML (Pug) / CSS (SCSS) by Miles Manners.
See the Pen
Full Page Horizontal Accordion by Miles Manners (@milesmanners)
on CodePen.
Responsive Accordion
Responsive accordion (background images). Made by Michael Ferry.
See the Pen
Responsive Accordion (Background Images) by Michael Ferry (@ferry)
on CodePen.
Flexbox Accordion
Simple horizontal flexbox accordion. Made by Arjan Jassal.
See the Pen
Flexbox Accordion by Arjan Jassal (@arjancodes)
on CodePen.
VERTICAL ACCORDIONS
Collection of free HTML and CSS vertical accordions.
ACCORDION CONTENT
Air quotes card mode grid and accordion content. Made with HTML / CSS / JavaScript by ZingGrid.
See the Pen
Air Quotes Card Mode Grid + Accordion Content (cpc-air CodePen Challenge) by ZingGrid (@zinggrid)
on CodePen.
PURE SCSS ACCORDION TABS
Accordion tabs without JS. This tabs have responsive design. Made with HTML / CSS (SCSS) by Natalia.
See the Pen
pure scss accordion tabs by Natalia (@natali_k)
on CodePen.
CSS VERTICAL ACCORDION
CSS vertical accordion for frequently asked questions. Made with HTML / CSS (Post CSS) by Monica Wheeler.
See the Pen
CodePen Challenge details and summary by Monica Wheeler (@frogmcw)
on CodePen.
ACCORDIONS PLS
Vertical accordion with HTML, CSS and JS (Vue.js). Made with HTML/CSS/JavaScript/Babel (Vue.js) by Ryan.
See the Pen
Accordions Pls by Ryan (@RyanNHG)
on CodePen.
ACCORDION WITH INPUT EDIT
Pure CSS accordion with input edit. Made with HTML/CSS by Jorge Brunetto.
See the Pen
Pure CSS – Accordion With Input Edit by Jorge Brunetto (@jorgebrunetto)
on CodePen.
ANIMATED CSS ACCORDION
Animated collapse/expend component. Made with HTML / CSS (SCSS) by Elior Tabeka.
See the Pen
Animated Collapse / Expend Component by Elior Tabeka (@eliortabeka)
on CodePen.
ACCORDION IN JS
Accordion in vanilla JS with CSS transition. Made with HTML/CSS(SCSS)/JavaScript by Davide Cantelli.
See the Pen
Accordion in Vanilla Js with Css transition by Davide Cantelli (@cant89)
on CodePen.
ACCORDION 2.0
Vertical accordion with HTML, CSS and JS. Made with HTML/CSS/JS by Stelios Baglaridis.
See the Pen
Accordion 2.0 by Stelios Baglaridis (@SteliosBox)
on CodePen.
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. Made with HTML/CSS (Ionicons.css)/JavaScript (jQuery.js) by Lewis Briffa.
See the Pen
Accordion by Lewis Briffa (@LewisBriffa)
on CodePen.
ARIA ACCESSIBLE ACCORDION
A simple accordion that can be used by both mouse and keyboard-only users. Made with HTML/CSS(SCSS)/JavaScript (jQuery.js) by Kiri Egington.
See the Pen
ARIA Accessible Accordion by Kiri Egington (@kiriegington)
on CodePen.
FAQ ACCORDION
Minimal FAQ accordion made with little vanilla JavaScript. Made with HTML / CSS / JavaScript by Katherine Kato.
See the Pen
FAQ by Katherine Kato (@kathykato)
on CodePen.
BASIC ACCORDION
Basic accordion in HTML, CSS and JS. Made with HTML/CSS/SCSS (Animate.css)/JavaScript (jQuery.js) by onepage.
See the Pen
Basic, accordion by onepage (@onepage-themes)
on CodePen.
Simple Accordion Concept
HTML, CSS and JavaScript simple accordion concept. Made by Kyle Brumm.
See the Pen
Simple Accordion Concept by Kyle Brumm (@kjbrum)
on CodePen.
Funky Pure CSS Accordion
Another pure CSS UI Piece here using radio buttons for the active states. Made by Jamie Coulter.
See the Pen
Funky Pure CSS Accordion by Jamie Coulter (@jcoulterdesign)
on CodePen.
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.
See the Pen
CSS Accordion by Matthew Scott (@mxttsco)
on CodePen.
3D Accordion
Simple accordion with 3D folding paper effect in HTML, CSS and JavaScript. Made by Pawe Targoski.
See the Pen
3D accordion (simple folding paper effect) by Pawe Targoski (@paweltar)
on CodePen.
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. Made with HTML/CSS (Bootstrap.js)/JavaScript (jQuery.js, Bootstrap.js) by Shehab Eltawel.
See the Pen
Material design Accordion – Bootstrap v3 by Shehab Eltawel (@shehab-eltawel)
on CodePen.
Flat Accordion
Flat accordion in HTML, CSS and JavaScript. Made by Soufiane Abid.
See the Pen
flat accordion by Soufiane Abid (@SoufianeAbid)
on CodePen.
Pure HTML And CSS Accordion
Created and designed (in browser) a pure HTML and CSS expandable accordion for fun.
Made by Chris Ota.
See the Pen
Pure HTML and CSS Accordion by Chris Ota (@chrisota)
on CodePen.
CSS Responsive Animated Accordion
HTML and CSS responsive animated accordion. Made by Chris Wright.
See the Pen
CSS Responsive animated Accordion by Chris Wright (@chriswrightdesign)
on CodePen.
Swanky Little Accordian List
Here’s another little CSS creation using the ‘Label for’ trick. Made by Jamie Coulter.
See the Pen
Swanky little accordian list by Jamie Coulter (@jcoulterdesign)
on CodePen.
CSS + HTML Only Accordion Element
Read the copy in the accordion sections for some info about how this was made. Made by Alex Bergin.
See the Pen
CSS + HTML only Accordion Element by Alex Bergin (@abergin)
on CodePen.
Responsive Animated SCSS Accordion
Responsive animated SCSS accordion with some text-background-clipping and linear-background overlay. Made by MrPirrera.
See the Pen
Responsive Animated SCSS Accordion by MrPirrera (@pirrera)
on CodePen.
Awesome post! Keep up the great work! 🙂