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.

ACCORDION GALLERY

CSS responsive accordion gallery with zoom animation.

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

PURE CSS ACCORDION

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

ACCORDION IMAGE GALLERY

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

CSS3 ACCORDION SLIDER WITH TRANSITIONS AND FLEXBOX

CSS3 accordion with 5 different effects.

Expanding Horizontal Accordion In React

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

Pure CSS Accordion

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

HORIZONTAL ACCORDION

Full page horizontal accordion.

Responsive Accordion

Responsive accordion (background images).

Accordion Navigation

No javascript, no flexbox.

Flexbox Accordion

Simple horizontal flexbox accordion.

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.

ANIMATED ACCORDION

Animated accordion with HTML details element.

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

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.

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.

CSS VERTICAL ACCORDION

CSS vertical accordion for frequently asked questions.

ACCORDIONS PLS

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

ACCORDION WITH INPUT EDIT

Pure CSS accordion with input edit.

ANIMATED CSS ACCORDION

Animated collapse/expend component.

ACCORDION IN JS

Accordion in vanilla JS with CSS transition.

ACCORDION 2.0

Vertical accordion with HTML, CSS and JS.

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.

ARIA ACCESSIBLE ACCORDION

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

FAQ ACCORDION

Minimal FAQ accordion made with little vanilla JavaScript.

BASIC ACCORDION

Basic accordion in HTML, CSS and JS.

Simple Accordion Concept

HTML, CSS and JavaScript simple accordion concept.

Funky Pure CSS Accordion

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

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

3D Accordion

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

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.

Flat Accordion

Flat accordion in HTML, CSS and JavaScript.

Pure HTML And CSS Accordion

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

CSS Responsive Animated Accordion

HTML and CSS responsive animated accordion.

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.

Swanky Little Accordian List

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

CSS + HTML Only Accordion Element

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

Responsive Animated SCSS Accordion

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