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

  1. CSS Accordions
  2. HTML <details> & <summary> with CSS
  3. jQuery Accordions
  4. React Accordions

Author

  • Rob Stinson

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

Author

  • The Code Father

Links

Made with

  • HTML / CSS

About a code

Pure CSS Accordion Menu

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

Responsive: yes

Dependencies: -

Author

  • Ahmad Emran

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

Demo image: Accordion Menu Accordion Menu - GIF Demo

Author

  • Ahmad Emran

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

Demo image: Vertical Accordion Menu Vertical Accordion Menu - GIF Demo

Author

  • Eriksen

Links

Made with

  • HTML / CSS

About the code

Vertical Accordion Menu

CSS only vertical accordion menu.

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

Dependencies: -

Demo image: Accordion Menu Accordion Menu - GIF Demo

Author

  • mori

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

Demo image: CSS Accordion CSS Accordion - GIF Demo

Author

  • Theodore Kluge

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

Demo image: Accordion Menu in Pure CSS3 Accordion Menu in Pure CSS3 - GIF Demo

Author

  • Valeriu Timbuc

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

Demo image: Multi-Level Accordion Menu Multi-Level Accordion Menu - GIF Demo

Author

  • CodyHouse

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

Demo image: Swanky Pure CSS Accordion Menu Swanky Pure CSS Accordion Menu - GIF Demo

Author

  • Jamie Coulter

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 labels for trick to toggle animations.

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

Dependencies: -

Demo image: Accordion Menu Accordion Menu - GIF Demo

Author

  • Pedro Nauck

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