Collection of free HTML and CSS accordion code examples: horizontal, vertical, simple, responsive, animated and etc. Update of March 2019 collection. 4 new examples.

37 CSS Accordions

Collection of free HTML and CSS accordion code examples: horizontal, vertical, simple, responsive, animated, etc. Update of March 2019 collection. 4 new examples.

Table of Contents

  1. Horizontal Accordions
  2. Vertical Accordions

Related Articles

  1. CSS Accordion Menus
  2. Bootstrap Accordions
  3. jQuery Accordions
  4. React Accordions
  5. HTML <details> & <summary> with CSS

Horizontal Accordions

Author

  • @keyframers

Links

Made with

  • HTML / CSS (SCSS)

About a code

CSS-only Line Bar Navigation

Budging bars. CSS-only line bar navigation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Daniel Subat

Links

Made with

  • HTML / CSS (SCSS)

About the code

Accordion Gallery

CSS responsive accordion gallery with zoom animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Pure CSS Accordion

Author

  • Ivan Bogachev

Links

Made with

  • HTML (Pug) / CSS (Less)

About the code

Pure CSS Accordion

Pure CSS horizontal accordion with transform and box-shadow effects.

Demo image: Accordion Image Gallery

Author

  • Stefan C.

Links

Made with

  • HTML / CSS

About the code

Accordion Image Gallery

CSS accordion image gallery. Less code and great animation effect.

Demo image: CSS3 accordion slider with Transitions and Flexbox

Author

  • fox_hover

Links

Made with

  • HTML
  • CSS/SCSS

About the code

CSS3 Accordion Slider With Transitions And Flexbox

CSS3 accordion with 5 different effects.

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

download demo and code

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

download demo and code

Demo image: Horizontal Accordion

Author

  • Miles Manners

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Horizontal Accordion

Full page horizontal accordion.

Demo Image: Responsive Accordion
Demo Image: Responsive Accordion

Responsive Accordion

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

download demo and code

Demo Image: Accordion Navigation
Demo Image: Accordion Navigation

Accordion Navigation

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

download demo and code

Demo Image: Flexbox Accordion
Demo Image: Flexbox Accordion

Flexbox Accordion

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

download demo and code

Vertical Accordions

Author

  • Kniw Studio

Links

Made with

  • HTML / CSS

About a code

Collapsing Accordion Pure CSS

This example will collapse without the need for any kind of JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Mert Cukuren

Links

Made with

  • HTML / CSS (SCSS)

About a code

Animated Accordion

Animated accordion with HTML details element.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • ZingGrid

Links

Made with

  • HTML / CSS / JavaScript

About the code

Accordion Content

Air quotes card mode grid and accordion content.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: zinggrid.js

Author

  • Natalia

Links

Made with

  • HTML / CSS (SCSS)

About the code

Pure SCSS Accordion Tabs

Accordion tabs without JS. This tabs have responsive design.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: CSS Vertical Accordion

Author

  • Monica Wheeler

Links

Made with

  • HTML / CSS (Post CSS)

About the code

CSS Vertical Accordion

CSS vertical accordion for frequently asked questions.

Demo image: Accordions Pls

Author

  • Ryan

Links

Made with

  • HTML/Pug
  • CSS/SCSS
  • JavaScript/Babel (Vue.js)

About the code

Accordions Pls

Vertical accordion with HTML, CSS and JS (Vue.js).

Demo image: Accordion With Input Edit

Author

  • Jorge Brunetto

Links

Made with

  • HTML
  • CSS

About the code

Accordion With Input Edit

Pure CSS accordion with input edit.

Demo image: Animated CSS Accordion

Author

  • Elior Tabeka

Links

Made with

  • HTML / CSS (SCSS)

About the code

Animated CSS Accordion

Animated collapse/expend component.

Demo image: Accordion In Js

Author

  • Davide Cantelli

Links

Made with

  • HTML
  • CSS/SCSS
  • JavaScript

About the code

Accordion In Js

Accordion in vanilla JS with CSS transition.

Demo image: Accordion 2.0

Author

  • Stelios Baglaridis

Links

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Accordion 2.0

Vertical accordion with HTML, CSS and JS.

Demo image: Accordion

Author

  • Lewis Briffa

Links

Made with

  • HTML
  • CSS (Ionicons.css)
  • JavaScript (jQuery.js)

About the 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.

Demo image: ARIA Accessible Accordion

Author

  • Kiri Egington

Links

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jQuery.js)

About the code

ARIA Accessible Accordion

A simple accordion that can be used by both mouse and keyboard-only users.

Demo image: FAQ Accordion

Author

  • Katherine Kato

Links

Made with

  • HTML / CSS / JavaScript

About the code

FAQ Accordion

Minimal FAQ accordion made with little vanilla JavaScript.

Demo image: Basic Accordion

Author

  • onepage

Links

Made with

  • HTML
  • CSS/SCSS (Animate.css)
  • JavaScript (jQuery.js)

About the code

Basic Accordion

Basic accordion in HTML, CSS and JS.

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

download demo and code

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

download demo and code

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

download demo and code

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

download demo and code

Demo image: Material Design Accordion - Bootstrap 3

Author

  • Shehab Eltawel

Links

Made with

  • HTML
  • CSS (Bootstrap.js)
  • JavaScript (jQuery.js, Bootstrap.js)

About the 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.

Demo Image: Flat Accordion
Demo Image: Flat Accordion

Flat Accordion

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

download demo and code

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

download demo and code

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

download demo and code

Author

  • Rau

Links

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Accordion

Version 2.0: Redesigned with SCSS and smooth animation. Added a tab "close" in "open one" option to close other tab. Acordeon made with just CSS. Based on checkbox input + label trick to active tabs.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

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

download demo and code

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

download demo and code

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

download demo and code

back to top