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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

Responsive Accordion

Responsive accordion (background images). Made by Michael Ferry.

See the Pen
Responsive Accordion (Background Images) by Michael Ferry (@ferry)
on CodePen.

 Demo and Code

Flexbox Accordion

Simple horizontal flexbox accordion. Made by Arjan Jassal.

See the Pen
Flexbox Accordion by Arjan Jassal (@arjancodes)
on CodePen.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and 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. Made with HTML/CSS (Ionicons.css)/JavaScript (jQuery.js) by Lewis Briffa.

See the Pen
Accordion by Lewis Briffa (@LewisBriffa)
on CodePen.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code 

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.

 Demo and 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. 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.

 Demo and Code

Flat Accordion

Flat accordion in HTML, CSS and JavaScript. Made by Soufiane Abid.

See the Pen
flat accordion by Soufiane Abid (@SoufianeAbid)
on CodePen.

 Demo and Code

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.

 Demo and Code

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.

Demo and Code

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.

 Demo and Code

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.

 Demo and Code

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.

 Demo and Code

Categorized in:

HTML / CSS

Tagged in:

, , , , , , , , , , , ,