10 CSS Vertical Accordions

About a code

Accordion

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

Responsive: yes

Dependencies: -

About a code

Accordion

Slide from left accordion.

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

Responsive: yes

Dependencies: -

About a code

Rainbow Accordion

HTML list with an accordion-like structure. Mobile optimized and easily editable. CSS variables for the colors; built with Flexbox.

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

Responsive: yes

Dependencies: -

About a code

Pure CSS Accordion

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

Responsive: yes

Dependencies: -

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

About a code

Animated Accordion

Animated accordion with HTML details element.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

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

About the code

CSS Vertical Accordion

CSS vertical accordion for frequently asked questions.

About the code

Accordion With Input Edit

Pure CSS accordion with input edit.

About the code

Animated CSS Accordion

Animated collapse/expend component.