Transitioning accordions from small height to full height with CSS
- by arkanciscan
I am building an accordion list and I want it to animate open and closed using a CSS -webkit-transition:. The animation is triggered by an event handler that simply toggles the .open class on and off. The problem is that when I click it, the animation goes from closed height to 0px height then jerks back to full height instead of smoothly animating to full height.
HTML
<ul class="accordion">
<li>Foo
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis leo sit amet justo vulputate volutpat. Suspendisse potenti. Aliquam aliquet justo ut turpis suscipit adipiscing.</p>
</li>
<li class="open">Baz
<p>Ut velit magna, sagittis at blandit accumsan, vestibulum et dolor. Aliquam elit ante, congue vel pharetra ut, ultricies non est. In hac habitasse platea dictumst. Donec velit ligula, sodales a imperdiet non, sagittis id mauris.</p>
</li>
<li>Bar
<p>Cras sit amet gravida lacus. Nulla consequat molestie nunc nec fermentum. Donec lobortis pretium quam sit amet scelerisque.</p>
</li>
</ul>?
Javascript
$('.accordion').delegate('li', 'click', function(li){
$(this).toggleClass('open');
});
Css
.accordion li.open{
-webkit-transition: height 1s;
}
.accordion li:not(.open){
height: 1em;
-webkit-transition: height 1s;
}
?
Try it on JSFiddle and see what I mean.
I've already figured out how to make it work, but it requires setting an explicit height on the .open class. The accordions have variable height however, and creating an explicit selector for each one is obtrusive and unmaintainable. Can anyone give me a better solution than this?
Here it is working with an explicit height that doesn't fit the content
