TOP 37 CSS Accordions

CSS-ONLY LINE BAR NAVIGATION

Budging bars. CSS-only line bar navigation.

See the Pen 📊 Budging Bars | CSS-only Line Bar Navigation Tutorial | @keyframers 2.15.0 by @keyframers (@keyframers) on CodePen.light

Author

  • @keyframers

Made with

  • HTML / CSS (SCSS)

ACCORDION GALLERY

CSS responsive accordion gallery with zoom animation.

See the Pen accordion gallery zoom animation (css, responsive) by Daniel Subat (@bbx) on CodePen.light

Author

  • Daniel Subat

Made with

  • HTML / CSS (SCSS)

PURE CSS ACCORDION

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

Demo image: Pure CSS Accordion

Author

  • Ivan Bogachev

Made with

  • HTML (Pug) / CSS (Less)

ACCORDION IMAGE GALLERY

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

Demo image: Accordion Image Gallery

Author

  • Stefan C.

Made with

  • HTML / CSS

CSS3 ACCORDION SLIDER WITH TRANSITIONS AND FLEXBOX

CSS3 accordion with 5 different effects.

Demo image: CSS3 accordion slider with Transitions and Flexbox

Author

  • fox_hover

Made with

  • HTML
  • CSS/SCSS

Expanding Horizontal Accordion In React

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

Demo Image: Expanding Horizontal Accordion in React

Author

  • Sean

Made with

  •  CSS
Demo and Download Demo and Download

Pure CSS Accordion

Image accordion only with CSS and color filters using the rgba() function.

Demo Image: Pure CSS Accordion

Author

  • Eduardo Moreno

Made with

  • CSS
Demo and Download Demo and Download

HORIZONTAL ACCORDION

Full page horizontal accordion.

Demo image: Horizontal Accordion

Author

  • Miles Manners

Made with

  • HTML (Pug) / CSS (SCSS)

Responsive Accordion

Responsive accordion (background images).

Demo Image: Responsive Accordion

Author

  • Michael Ferry

Made with

  • CSS
Demo and Download Demo and Download

Accordion Navigation

No javascript, no flexbox.

Demo Image: Accordion Navigation

Author

  • Oliver Knoblich

Made with

  • CSS
Demo and Download Demo and Download

Flexbox Accordion

Simple horizontal flexbox accordion.

Demo Image: Flexbox Accordion

Author

  • Arjan Jassal

Made with

  • CSS
Demo and Download Demo and Download

COLLAPSING ACCORDION PURE CSS

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

See the Pen Collapsing Accordion Pure CSS by Kniw Studio (@JeremyWink) on CodePen.light

Author

  • Kniw Studio

Made with

  • HTML / CSS

ANIMATED ACCORDION

Animated accordion with HTML details element.

See the Pen animated details element — week 11/52 by Mert Cukuren (@knyttneve) on CodePen.light

Author

  • Mert Cukuren

Made with

  • HTML / CSS (SCSS)

ACCORDION CONTENT

Air quotes card mode grid and accordion content.

See the Pen Air Quotes Card Mode Grid + Accordion Content (cpc-air CodePen Challenge) by ZingGrid (@zinggrid) on CodePen.light

Author

  • ZingGrid

Made with

  • HTML / CSS / JavaScript

PURE SCSS ACCORDION TABS

Accordion tabs without JS. This tabs have responsive design.’

See the Pen pure scss accordion tabs by Natalia (@natali_k) on CodePen.light

Author

  • Natalia

Made with

  • HTML / CSS (SCSS)

CSS VERTICAL ACCORDION

CSS vertical accordion for frequently asked questions.

Demo image: CSS Vertical Accordion

Author

  • Monica Wheeler

Made with

  • HTML / CSS (Post CSS)

ACCORDIONS PLS

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

Demo image: Accordions Pls

Author

  • Ryan

Made with

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

ACCORDION WITH INPUT EDIT

Pure CSS accordion with input edit.

Demo image: Accordion With Input Edit

Author

  • Jorge Brunetto

Made with

  • HTML
  • CSS

ANIMATED CSS ACCORDION

Animated collapse/expend component.

Demo image: Animated CSS Accordion

Author

  • Elior Tabeka

Made with

  • HTML / CSS (SCSS)

ACCORDION IN JS

Accordion in vanilla JS with CSS transition.

Demo image: Accordion In Js

Author

  • Davide Cantelli

Made with

  • HTML
  • CSS/SCSS
  • JavaScript

ACCORDION 2.0

Vertical accordion with HTML, CSS and JS.

Demo image: Accordion 2.0

Author

  • Stelios Baglaridis

Made with

  • HTML
  • CSS
  • JavaScript

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: Accordion

Author

  • Lewis Briffa

Made with

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

ARIA ACCESSIBLE ACCORDION

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

Demo image: ARIA Accessible Accordion

Author

  • Kiri Egington

Made with

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

FAQ ACCORDION

Minimal FAQ accordion made with little vanilla JavaScript.

Demo image: FAQ Accordion

Author

  • Katherine Kato

Made with

  • HTML / CSS / JavaScript

BASIC ACCORDION

Basic accordion in HTML, CSS and JS.

Demo image: Basic Accordion

Author

  • onepage

Made with

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

Simple Accordion Concept

HTML, CSS and JavaScript simple accordion concept.

Demo Image: Simple Accordion Concept

Author

  • Kyle Brumm

Made with

  • Html / CSS
Demo and Download Demo and Download

Funky Pure CSS Accordion

Another pure CSS UI Piece here using radio buttons for the active states.

Demo Image: Funky Pure CSS Accordion

Author

  • Jamie Coulter

Made with

  • CSS
Demo and Download Demo and Download

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”.

Demo Image: CSS Accordion

Author

  • Matthew Scott

Made with

  •  CSS
Demo and Download Demo and Download

3D Accordion

Simple accordion with 3D folding paper effect in HTML, CSS and JavaScript.

Demo Image: 3D Accordion

Author

  • Pawe Targoski

Made with

  • Html / CSS / JavaScript
Demo and Download Demo and Download

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: Material Design Accordion - Bootstrap 3

Author

  • Shehab Eltawel

Made with

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

Flat Accordion

Flat accordion in HTML, CSS and JavaScript.

Demo Image: Flat Accordion

Author

  • Soufiane Abid

Made with

  • Html / CSS /JavaScript
Demo and Download Demo and Download

Pure HTML And CSS Accordion

Created and designed (in browser) a pure HTML and CSS expandable accordion for fun.

Demo Image: Pure HTML And CSS Accordion

Author

  • Chris Ota

Made with

  • Html / CSS
Demo and Download Demo and Download

CSS Responsive Animated Accordion

HTML and CSS responsive animated accordion.

Demo Image: CSS Responsive Animated Accordion

Author

  • Chris Wright

Made with

  • Html / CSS
Demo and Download Demo and Download

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.

See the Pen Pure CSS Accordion by Rau (@raubaca) on CodePen.light

Author

  • Rau

Made with

  • HTML / CSS (SCSS)

Swanky Little Accordian List

Here’s another little CSS creation using the ‘Label for’ trick.

Demo Image: Swanky Little Accordian List

Author

  • Jamie Coulter

Made with

  • CSS
Demo and Download Demo and Download

CSS + HTML Only Accordion Element

Read the copy in the accordion sections for some info about how this was made.

Demo Image: CSS + HTML Only Accordion Element

Author

  • Alex Bergin

Made with

  • Html / CSS
Demo and Download Demo and Download

Responsive Animated SCSS Accordion

Responsive animated SCSS accordion with some text-background-clipping and linear-background overlay.

Demo Image: Responsive Animated SCSS Accordion

Author

  • MrPirrera

Made with

  • Html / CSS (SCSS)
Demo and Download Demo and Download