October 7, 2015 | 41 Feedbacks

Multi-Level Accordion Menu

A simple CSS accordion menu with support for sub level items.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

Today’s resource is a handy accordion menu with support for groups/subitems. It works with CSS only, using the :checked pseudo-class selector on the checkboxes input elements. However we included a version with jQuery as well, in case you prefer a subtle animation compared to the instant default effect. Your call!

The first user case I can think of for this resources is a “layer organizer”. Think of Sublime Text sidebar, or Photoshop layer window. Anyway, I’m sure you’ll find a use for this new snippet to store in your arsenal ;)


Creating the structure

The HTML structure is pretty simple: the accordion is an unordered list. If a list item contains subitems, then we insert an input[type=checkbox] and its label. Also, we add the .has-children class to the list item. All “standard” list items contain just an anchor tag.

Adding style

We use a smart (and quite standard nowadays) technique to detect the click and show sub content with CSS only: by including a checkbox input element, we can use the :checked pseudo-class and the adjacent sibling selector (div + div) to change the display mode of the sub <ul> element from “none” to “block”.

Step by step: first of all, we have to make sure that the checkbox input element covers the entire list item that contains subitems. Put in other words: we need to create a custom checkbox. So, firstly, you need to make sure that when you click on the label, the checkbox is checked/unchecked as well. This is achieved by using the “for” attribute inside the label (label “for” attribute = input “name” and “id” attributes. See html section above). This way you can simply hide the input element and work with the label instead.

Now notice in the HTML structure that input, label and the unordered list (that we make visible on click) are siblings. By using the :checked pseudo-class, you can set the following process in motion: when the checkbox input is checked (click on label), then take the <ul> sibling element and change its display value from “none” to “block”:

If you want to gently animate the opening phase, then include the .js file as well. Also remember to add the .animate class to the main .cd-accordion-menu element (this will animate the arrow rotation).


Oct 7, 2015
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • Ramesh sau

    it is a nice , but it’s working only like vector design .not like flate design

    • brendan

      lol wut

  • Luke Edwards

    You can still have the CSS version animate as the jQuery version does. Like the color palette

    • Sebastiano Guerriero

      hey Luke! True, but you should set a fixed height for the hidden elements, which is ok in some cases, not so convenient in others

      • Chris

        Or you could animate max-height instead: I don’t really like this solution, but it seems to be the best one.

        • idol chan

          this solution introduces uneven delayed animation. bad UX indeed.

  • Yimiprod

    you can use the tilde selector (~) instead of +

    • Andy Man

      Why? You want to select the adjacent selector of the first element that is immediately preceded by the former selector. ~ is less strict, so more prone to errors.

  • Courtney Artuso

    Very nice. I noticed when opening a parent the child icon jumps to the right it seems that the closed folder icon has a smaller width than that of the open folder icon thats causing the jump. Other than that its very nice.

  • Chu Quang Tú

    Briliant ! Thanks mate

  • Peter

    Can you make a tut about calendar

  • Philipp

    This is fantastic, many thanks for sharing it!
    Has anyone an idea how to define attributes of parents which are open (different background-color etc.)?

    • Philipp

      this worked for me:

      .cd-accordion-menu input[type=checkbox]:checked + label {
      color: #fff;

  • Roger Ramos

    Awesome solution!

  • 王金海

    colors looks so soft.

  • Alexander M

    Awesome and simple menu – just what I was looking for, please share how to integrate it into wordpress?

    • Alex King

      I’d like to know as well. If anyone integrates this with WordPress – Let me know.

  • TheNamesQ

    Anyway to save menu state after clicking a link in it?

  • Robert

    Awesome work ,Has anyone an idea how to add another checkbox with position relative to each folder ? so the user could pick a folder with out expand it ? Thnks in advance

  • Fernando Silva

    Very nice, many thanks. Just one question, the transition when the display changes from none to block is not working for me =/

  • Kenneth Kerr

    Thanks for this solutions it works pretty well. I have a question: How do I keep all of the accordions collapsed when a user enters the page for the first time?
    Thanks for the help.

    • Kenneth Kerr

      Got it… There is a checked attribute that needs to be removed from the input tag…


    Great and neat solution
    For now the jquery version works in IE8 without a problem

    However, what if i change the input type to a radio button where selecting one panel closes the other panels with the same name attribute, Now i have made the appropriate CSS changes from checkbox to radio and it works as desired. What changes do i have to make to the jQuery code so that it behaves as the CSS version where opening a closed panel closes the currently opened panel


  • Богдан

    definitely this project must be in bookmarks!

  • Daniel

    Hello, im just starting on the developer work. Im using this effect to my own webservice using ASP.NET but i just want to know how can i edit the css style or if i can use another css style in the same webform etc.?

  • VasquPL

    Hello, first od all great thanks for a super looking menu. Perfect job! I have managed to style all the menu how i need but can You tell me hov to chango color of this white arrow?

    • Claudia Romano

      Hi there, you can change the fill property of the icon inside the cd-icons.svg file. Cheers!

      • VasquPL

        thx for your reply. Seeing the picture was the firs thing which i have done but i couldnt see the white arrow on a white background of workspace and it confused me. I feel like a lame :) hehe thx.

  • Arete0904

    I would also like to know how to implement this in wordpress (preferably with an _s theme)

  • Graphics Jadeja

    free uikits and design materials…

  • rcdc chennai

    Thank you for sharing them.

  • Jeff Cartwright

    Thanks. This worked. I made some modifications for my applications:

  • Smith

    Thanks! But please tell me if it possible to clode all other tabs when you open one of them?


      Does anybody know how to close all other items when you open one of them?

      • tio_el

        change the checkboxes to radio buttons

  • Lacey

    Wow, this is super easy. Thank you for sharing!

  • Xuân Dũng

    How to Collapsed all node when click link a:

    Group 1

    Sub Group 1


    Sub Group 2

    Sub Group Level 3




    Group 4

    Sub Group 3



    I using:

    $(document).ready(function () {
    $(‘#go’).click(function () {

    But not change.

  • Techno

    Nice looking menu. Great job
    I’m wondering how to move a child icon to the left. in other words, is there a way to align the parent and the child icon exactly at the same position. if not, how to reduce the left margin of the child icon?

  • Bilal Yaqoob

    i dont know if its only my problem or otthers to but everytime i try to paste code in side my bootstrap site both css collide creates a mess of the page. How can i solve that ???

  • mpugach

    thank you

    also works

  • Kris Kell

    Thanks a lot for this. Works fine!
    How can I open one tab (f.e. second or third) by default when entering the site?