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