CODEWITHSUNDEEP
jquerycsscss-transitions
Ruby
Ruby

Reputation: 533

css3 transition accordion menu

I made an accordion menu that replaces the select form control, and I want to use css3 transitions to make it expand/contract smoothly.
Here's a link to the jsfiddle: http://jsfiddle.net/hKsCD/4/

To achieve the desired effect I need to animate the height of each of the links, but I'm not sure how to do that. CSS3 transitions are confusing. O_o

Upvotes: 0

Views: 2194

Answers (1)

Peter
Peter

Reputation: 956

.accordion {
    height: 20px; /*define height to start from*/
    transition: height 2s;
    -moz-transition: height 2s; /* Firefox 4 */
    -webkit-transition: height 2s; /* Safari and Chrome */
    -o-transition: height 2s; /* Opera */
}
.accordion.expanded {
    height: 400px;/*desired height when expanded*/
}

you have to be careful though when the height varies from one element to another, you should use a max-width workaround in these cases as "height:auto" won't work.

e.g. replace height in example above with max-height and in the expanded state set max-height to something the element will never reach (not too high though, as speed of animation is calculated in respect to the height to be animated --> a max-width that's too high (e.g. 9999px) results in an animation that's so fast you don't notice it)

Upvotes: 1

Related Questions