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

I think what you are looking for is to change your toggle handler to fadeIn() or fadeOut().

In the parenthesis, define the time (default is ms I believe) for the transition.

This is handling elements. To handle classes your code on fiddle may work with some css3 transitions although it may not be best practice due to browser compatibility:

-webkit-transition:  0.4s ease;
-moz-transition:  0.4s ease;
-o-transition: 0.4s ease;
transition:  0.4s ease;