CSS3 - Variable height accordion using transitions

Question

I've coded two small jQuery based scripts, one of accordions, and one of tabs, but then i realized that they were the same : get the clicked tab's index among other tabs, and only show the content that has the same index among contents.

But there's one annoying difference between the two : the animation. While tabs are only using the display property, accordions need to animate the height of content blocks.

Problem is that it is not possible to animate from height: 0; to height: auto;. There is a way to do it differently, using max-height, as described in [this] other SO question, but i don't really like this solution because it's hard-coded and doesn't always work.

Is there a way to animate a block's height from 0 to it's content height without using max-height or javascript ?

Thanks for your help !

Answer 1

No. CSS transitions can only go from a value (or no value indicating a zero value) to another value. They cannot go from a value (or zero value) to a non-zero undetermined value.