Collection of free HTML and CSS vertical accordion code examples from Codepen and other resources.
Links
Made with
- HTML / CSS / JS
About a code
Accordion
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Accordion
Slide from left accordion.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
Links
Made with
- HTML / CSS
About a code
Pure CSS Accordion
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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
Links
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: -
Links
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: -

Links
Made with
- HTML / CSS (Post CSS)
About the code
CSS Vertical Accordion
CSS vertical accordion for frequently asked questions.

Links
Made with
- HTML
- CSS
About the code
Accordion With Input Edit
Pure CSS accordion with input edit.

Links
Made with
- HTML / CSS (SCSS)
About the code
Animated CSS Accordion
Animated collapse/expend component.