Accordion menu using CSS3 Transitions

Last week, I had to help out a friend building a light jQuery accordion object : he wanted it without any jQuery, so I first thought of coding a small Javascript code instead. But that’s where I rediscovered the power of CSS 3 transitions.

One of the new abilities of CSS 3 is to allow web developers to design some transitions without using any Javascript at all. It’s kind of really smooth, and you don’t need to include jQuery or other heavy framework / plugin into your page.

As usual, Internet Explorer supports this feature only on versions 10+, and for Windows 8 only (I hope it will soon be compatible with Windows 7, too) – but it’s already supported by Chrome, Firefox, Safari, and Opera. On IE < v.10 it’s still working, but without any transition effect …

So, as I ran into it, I wanted to share with you the following small demo.

You just have to include into your CSS a “transition: <duration>;-webkit-transition: <duration>;” property. Originally, every browser had a specific propriety (-moz-transition ; -webkit-transition ; -o-transition) but now “transition” is generally working well (except for Safari, which still requires the -webkit- specific code).

Here is the CSS3 style sheet :

.accordion {
    border-bottom: 1px solid #ccc;
    overflow: hidden;
}
 
.accordion {
    transition: 1s;
    -webkit-transition: 1s;
    height: 20px;
    background-color: #ddeeff;
}
 
.accordion:hover {
    transition: 1s;
    -webkit-transition: 1s;
    height: 200px;
    background-color: #ffeedd;
}

And here we go for the HTML source :

<div class="accordion">1. Accordeon</div>
<div class="accordion">2. Accordeon</div>

This is the final result of our example :

1. Accordion
2. Accordion
Share