Top 33 CSS Accordions

Table of Contents

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.

PURE CSS ACCORDION

Pure CSS horizontal accordion with transform and box-shadow effects. Made with HTML (Pug) / CSS (Less) by Ivan Bogachev.

Demo and Code

ACCORDION IMAGE GALLERY

CSS accordion image gallery. Less code and great animation effect. Made with HTML/CSS by Stefan C.

Demo and Code

CSS3 ACCORDION SLIDER WITH TRANSITIONS AND FLEXBOX

CSS3 accordion with 5 different effects. Made with HTML/CSS/SCSS by fox_hover.

Demo and Code

Expanding Horizontal Accordion In React

A quick alternative to the standard ‘Accordion’ pattern, built completely with React.
Made by Sean.

Demo and Code

Pure CSS Accordion

Image accordion only with CSS and color filters using the rgba() function. Made by Eduardo Moreno.

Demo and Code

HORIZONTAL ACCORDION

Full page horizontal accordion. Made with HTML (Pug) / CSS (SCSS) by Miles Manners.

Demo and Code

Responsive Accordion

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

Demo and Code

Flexbox Accordion

Simple horizontal flexbox accordion. Made by Arjan Jassal.

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.

Demo and Code

PURE SCSS ACCORDION TABS

Accordion tabs without JS. This tabs have responsive design. Made with HTML / CSS (SCSS) by Natalia.

Demo and Code

CSS VERTICAL ACCORDION

CSS vertical accordion for frequently asked questions. Made with HTML / CSS (Post CSS) by Monica Wheeler.

Demo and Code

ACCORDIONS PLS

Vertical accordion with HTML, CSS and JS (Vue.js). Made with HTML/CSS/JavaScript/Babel (Vue.js) by Ryan.

Demo and Code

ACCORDION WITH INPUT EDIT

Pure CSS accordion with input edit. Made with HTML/CSS by Jorge Brunetto.

Demo and Code

ANIMATED CSS ACCORDION

Animated collapse/expend component. Made with HTML / CSS (SCSS) by Elior Tabeka.

Demo and Code

ACCORDION IN JS

Accordion in vanilla JS with CSS transition. Made with HTML/CSS(SCSS)/JavaScript by Davide Cantelli.

Demo and Code

ACCORDION 2.0

Vertical accordion with HTML, CSS and JS. Made with HTML/CSS/JS by Stelios Baglaridis.

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.

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.

Demo and Code

FAQ ACCORDION

Minimal FAQ accordion made with little vanilla JavaScript. Made with HTML / CSS / JavaScript by Katherine Kato.

Demo and Code

BASIC ACCORDION

Basic accordion in HTML, CSS and JS. Made with HTML/CSS/SCSS (Animate.css)/JavaScript (jQuery.js) by onepage.

Demo and Code

Simple Accordion Concept

HTML, CSS and JavaScript simple accordion concept. Made by Kyle Brumm.

Demo and Code

Funky Pure CSS Accordion

Another pure CSS UI Piece here using radio buttons for the active states. Made by Jamie Coulter.

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.

Demo and Code

3D Accordion

Simple accordion with 3D folding paper effect in HTML, CSS and JavaScript. Made by Pawe Targoski.

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.

Demo and Code