15 CSS Accordions

April 5, 2017 | by Vladimir Stepura

Collection of free HTML and CSS accordions: horizontal and vertical. Demo and download code (*zip).

Table Of Contents

  1. Horizontal Accordions
  2. Vertical Accordions

Horizontal Accordions

Demo Image: Expanding Horizontal Accordion in React
Demo Image: Expanding Horizontal Accordion In React

Expanding Horizontal Accordion In React

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

Demo Image: Pure CSS Accordion
Demo Image: Pure CSS Accordion

Pure CSS Accordion

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

Demo Image: Responsive Accordion
Demo Image: Responsive Accordion

Responsive Accordion

Responsive accordion (background images).
Made by Michael Ferry
October 1, 2015

Demo Image: Accordion Navigation
Demo Image: Accordion Navigation

Accordion Navigation

No javascript, no flexbox.
Made by Oliver Knoblich
August 25, 2015

Demo Image: Flexbox Accordion
Demo Image: Flexbox Accordion

Flexbox Accordion

Simple horizontal flexbox accordion.
Made by Arjan Jassal
December 28, 2014

Vertical Accordions

Demo Image: Simple Accordion Concept
Demo Image: Simple Accordion Concept

Simple Accordion Concept

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

Demo Image: Funky Pure CSS Accordion
Demo Image: Funky Pure CSS Accordion

Funky Pure CSS Accordion

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

Demo Image: CSS Accordion
Demo Image: CSS Accordion

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

Demo Image: 3D Accordion
Demo Image: 3D Accordion

3D Accordion

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

Demo Image: Flat Accordion
Demo Image: Flat Accordion

Flat Accordion

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

Demo Image: Pure HTML And CSS Accordion
Demo Image: Pure HTML And CSS Accordion

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

Demo Image: CSS Responsive Animated Accordion
Demo Image: CSS Responsive Animated Accordion

CSS Responsive Animated Accordion

HTML and CSS responsive animated accordion.
Made by Chris Wright
January 19, 2016

Demo Image: Swanky Little Accordian List
Demo Image: Swanky Little Accordian List

Swanky Little Accordian List

Here’s another little CSS creation using the ‘Label for’ trick.
Made by Jamie Coulter
February 22, 2015

Demo Image: CSS + HTML Only Accordion Element
Demo Image: CSS + HTML Only Accordion Element

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

Demo Image: Responsive Animated SCSS Accordion
Demo Image: Responsive Animated SCSS Accordion

Responsive Animated SCSS Accordion

Responsive animated SCSS accordion with some text-background-clipping and linear-background overlay.
Made by MrPirrera
December 11, 2014

FreeFrontend © 2016 - 2017

Back to top