webkit-transition height for a div with a dynamic changing height based on content?

Question

please see the following jsFiddle

http://jsfiddle.net/SgyEW/10/

You can click the various buttons which shows different length content which causes the box to grow/shrink.

I want the height change to be animated so it is not so jumpy, I tried this by adding:

-webkit-transition: all 1s linear; 

But that has no effect in this use case. Any ideas in terms of a solution that doesn't require JavaScript?

Thanks

Answer 1

I'm afraid there is no way of animating height with CSS3 transitions without some Javascript assistance, check out:

How can I transition height: 0; to height: auto; using CSS?

Can you use CSS3 to transition from height:0 to the variable height of content?

Additionally, your code goes from display: none to display: block, which wouldn't have an effect on height in any case. Instead of display none use height: 0 with overflow: hidden;