Expand div on click with smooth animation

Question

I am trying to expand a div with speed/smooth animation. Right now div expands with sudden change, my requirement is to give smooth animation while expanding.

Fiddl

Answer 1

The CSS specification does not define a method to animate the height or width of an element from an absolute value to auto. This is because the browser can't not easily/cheaply mathematically calculate the real value of auto when doing expanding animation.

Most expanding or contracting animation involving auto rely on Javascript. What they do is set the height or width to auto, then get new element height and apply an animation using the obtained value.

I've updated your jsfiddle to show what I'm telling you. http://jsfiddle.net/pnjpj3uo/14/