Collection of hand-picked free HTML and CSS accordion menu code examples from codepen and other resources. Update of June 2019 collection. 2 new items.
Related Articles
Links
Made with
- HTML / CSS
About a code
Lo-fi Tailwind CSS Accordion Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: tailwind.css
Links
Made with
- HTML / CSS
About a code
Pure CSS Accordion Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Awesome Accordion Menu
Awesome accordion menu using only HTML & CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css


Links
Made with
- HTML / CSS (SCSS) / JavaScript (Babel)
About the code
Accordion Menu
Accordion menu with HTML, CSS and little JS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css


Links
Made with
- HTML / CSS
About the code
Vertical Accordion Menu
CSS only vertical accordion menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS
About the code
CSS Accordion Menu
Pure CSS accordion menu using HTML input type="radio"
.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS
About the code
CSS Accordion
Accordion menu with only HTML and CSS. Click on an item to open. Click on its header or the list header to close. Add the class arrows
to nav.accordion
to add dropdown arrows.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS
About the code
Accordion Menu in Pure CSS3
In this tutorial we will learn how to create an accordion menu in pure CSS3. As we will create it with CSS this will only work on browsers and devices that support the :target
pseudo-class selector.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (SCSS)
About the code
Multi-Level Accordion Menu
A simple CSS accordion menu with support for sub level items.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML (Haml) / CSS (SCSS)
About the code
Swanky Pure CSS Accordion Menu
Pure CSS accordion menu. Nice little addition to any non-javascript user interface. Uses the label
s for trick to toggle animations.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


Links
Made with
- HTML / CSS (SCSS)
About the code
Accordion Menu
Only CSS3 accordion menu with vibrating effects.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -