How Can I Make An Accordion Menu With Css3?

How can I create an expandable menu with only HTML5 and CSS3? I want to display only 4 menu items and a view all list item, where clicking view all should expand all of the list it

Solution 1:

There are several ways to make it! For example the following. The HTML looks like this. There is a div, that you click and a div underneath that will expand. This is only possible with the pseudo-selector :target.

<divclass="accordion"><divid="one"class="section"><h3><ahref="#one">Heading 1</a></h3><div><p>Content</p></div></div><divid="two"class="section"><h3><ahref="#two">Heading 2</a></h3><div><p>Content</p></div></div></div>​




.accordion h3 + div {
        height: 0;
        overflow: hidden;
        -webkit-transition: height 0.3s ease-in;
        -moz-transition: height 0.3s ease-in;
        -o-transition: height 0.3s ease-in;
        -ms-transition: height 0.3s ease-in;
        transition: height 0.3s ease-in;
}

.accordion :target h3 + div {
        height: 100px;
}

.accordion .section.large:target h3 + div {
        overflow: auto;
}

I made a working Fiddle for you. Have a look at it: Check me out!

Solution 2:

You can check this out: http://thinkphp.github.com/cuba.js/accordion.html source: https://github.com/thinkphp/cuba.js cheers!