8 CSS Accordion Menus
Collection of hand-picked free HTML and CSS accordion menu code examples.
- CSS Accordions
- HTML <details> & <summary> with CSS
- jQuery Accordions
- React Accordions
Author
- Ahmad Emran
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
About the code
Vertical Accordion Menu
CSS only vertical accordion menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
About the code
CSS Accordion Menu
Pure CSS accordion menu using HTML input type="radio"
.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Author
- Theodore Kluge
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: -
Author
- Valeriu Timbuc
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: -
Author
- CodyHouse
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: -
Author
- Jamie Coulter
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: -
Author
- Pedro Nauck
About the code
Accordion Menu
Only CSS3 accordion menu with vibrating effects.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -