Collection of free HTML and CSS vertical accordion code examples from Codepen and other resources.

Author

  • Prabhu Kalyan Korivi

Made with

  • HTML / CSS / JS

About a code

Accordion

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

Responsive: yes

Dependencies: -

Author

  • Johnatan Vargas

Made with

  • HTML / CSS

About a code

Accordion

Slide from left accordion.

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

Responsive: yes

Dependencies: -

Author

  • MOZZARELLA

Made with

  • HTML / CSS

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

Author

  • Ian

Made with

  • HTML / CSS

About a code

Pure CSS Accordion

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

Responsive: yes

Dependencies: -

Author

  • Kniw Studio

Made with

  • HTML / CSS

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

Author

  • Mert Cukuren

Made with

  • HTML / CSS (SCSS)

About a code

Animated Accordion

Animated accordion with HTML details element.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Natalia

Made with

  • HTML / CSS (SCSS)

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

Demo image: CSS Vertical Accordion

Author

  • Monica Wheeler

Made with

  • HTML / CSS (Post CSS)

About the code

CSS Vertical Accordion

CSS vertical accordion for frequently asked questions.

Demo image: Accordion With Input Edit

Author

  • Jorge Brunetto

Made with

  • HTML
  • CSS

About the code

Accordion With Input Edit

Pure CSS accordion with input edit.

Demo image: Animated CSS Accordion

Author

  • Elior Tabeka

Made with

  • HTML / CSS (SCSS)

About the code

Animated CSS Accordion

Animated collapse/expend component.