A Collection of 22 Nice accordion examples with css only.

horizontal, vertical, simple, responsive, animated, etc.

1.ACCORDION GALLERY

CSS responsive accordion gallery with zoom animation.

Made with

Html
Css/SCSS

Author

Daniel Subat

Demo


2.PURE CSS ACCORDION

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

Made with

Html
Css/SCSS

Author

Ivan Bogachev

Demo


3.ACCORDION IMAGE GALLERY

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

Made with

Html
Css/SCSS

Author

Stefan C.

Demo


4.CSS3 ACCORDION SLIDER WITH TRANSITIONS AND FLEXBOX

CSS3 accordion with 5 different effects.

Made with

Html
Css/SCSS

Author

fox_hover

Demo


5.Expanding Horizontal Accordion In React

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

Made with

Html
Css/SCSS

Author

Sean

Demo


6.HORIZONTAL ACCORDION

Full page horizontal accordion.

Made with

Html
Css/SCSS

Author

Miles Manners

Demo


7.Responsive Accordion

Responsive accordion (background images).

Made with

Html
Css/SCSS

Author

Michael Ferry

Demo


8.CSS + HTML only Accordion Element

Made with

Html
Css/SCSS

Author

Alex Bergin

Demo


9.CSS Responsive animated Accordion

Made with

Html
Css/SCSS

Author

Chris Wright

Demo


10.Pure CSS Accordion

Made with

Html
Css/SCSS

Author

Rau

Demo


11.Sexy Accordion

Made with

Html
Css/SCSS

Author

Agustin Ortiz

Demo


12.Accordion with CSS3 & HTML5 only (use of checkbox)

Made with

Html
Css/SCSS

Author

César Gabriel

Demo


13.CSS Accordion

Made with

Html
Css/SCSS

Author

Theodore Kluge

Demo


14.Hover activated accordian with default state

Made with

Html
Css/SCSS

Author

Cory

Demo


15.Flexbox Accordion

Made with

Html
Css/SCSS

Author

Arjan Jassal

Demo


16.COLLAPSING ACCORDION PURE CSS

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

Made with

Html
Css/SCSS

Author

Kniw Studio

Demo


17.ACCORDION CONTENT

Air quotes card mode grid and accordion content.

Made with

Html
Css/SCSS

Author

ZingGrid

Demo


18.PURE SCSS ACCORDION TABS

Accordion tabs without JS. This tabs have responsive design.

Made with

Html
Css/SCSS

Author

Natalia

Demo


19.Accordion

Made with

Html
Css/SCSS

Author

Lewis Briffa

Demo


20.CSS VERTICAL ACCORDION

CSS vertical accordion for frequently asked questions.

Made with

Html
Css/SCSS

Author

Monica Wheeler

Demo


21.ANIMATED CSS ACCORDION

Animated collapse/expend component.

Made with

Html
Css/SCSS

Author

Elior Tabeka

Demo


22.ARIA ACCESSIBLE ACCORDION

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

Made with

Html
Css/SCSS

Author

Kiri Egington

Demo