Collection of free HTML and CSS accordion code examples: horizontal, vertical, simple, animated, etc.
Collection of free HTML and CSS horizontal accordions.
CSS responsive accordion gallery with zoom animation. Made with HTML / CSS (SCSS) by Daniel Subat.
PURE CSS ACCORDION
Pure CSS horizontal accordion with
box-shadow effects. Made with HTML (Pug) / CSS (Less) by Ivan Bogachev.
ACCORDION IMAGE GALLERY
CSS accordion image gallery. Less code and great animation effect. Made with HTML/CSS by Stefan C.
CSS3 ACCORDION SLIDER WITH TRANSITIONS AND FLEXBOX
CSS3 accordion with 5 different effects. Made with HTML/CSS/SCSS by fox_hover.
Expanding Horizontal Accordion In React
A quick alternative to the standard ‘Accordion’ pattern, built completely with React.
Made by Sean.
Pure CSS Accordion
Image accordion only with CSS and color filters using the rgba() function. Made by Eduardo Moreno.
Full page horizontal accordion. Made with HTML (Pug) / CSS (SCSS) by Miles Manners.
Responsive accordion (background images). Made by Michael Ferry.
Simple horizontal flexbox accordion. Made by Arjan Jassal.
Collection of free HTML and CSS vertical accordions.
PURE SCSS ACCORDION TABS
Accordion tabs without JS. This tabs have responsive design. Made with HTML / CSS (SCSS) by Natalia.
CSS VERTICAL ACCORDION
CSS vertical accordion for frequently asked questions. Made with HTML / CSS (Post CSS) by Monica Wheeler.
ACCORDION WITH INPUT EDIT
Pure CSS accordion with input edit. Made with HTML/CSS by Jorge Brunetto.
ANIMATED CSS ACCORDION
Animated collapse/expend component. Made with HTML / CSS (SCSS) by Elior Tabeka.
ACCORDION IN JS
Vertical accordion with HTML, CSS and JS. Made with HTML/CSS/JS by Stelios Baglaridis.
ARIA ACCESSIBLE ACCORDION
Simple Accordion Concept
Funky Pure CSS Accordion
Another pure CSS UI Piece here using radio buttons for the active states. Made by Jamie Coulter.
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.
MATERIAL DESIGN ACCORDION – BOOTSTRAP 3
Pure HTML And CSS Accordion
Created and designed (in browser) a pure HTML and CSS expandable accordion for fun.
Made by Chris Ota.
CSS Responsive Animated Accordion
HTML and CSS responsive animated accordion. Made by Chris Wright.
Swanky Little Accordian List
Here’s another little CSS creation using the ‘Label for’ trick. Made by Jamie Coulter.
CSS + HTML Only Accordion Element
Read the copy in the accordion sections for some info about how this was made. Made by Alex Bergin.
Responsive Animated SCSS Accordion
Responsive animated SCSS accordion with some text-background-clipping and linear-background overlay. Made by MrPirrera.