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

What you are looking for may be the "easing" argument defined in the JQueryUI ToggleClass API:

http://api.jqueryui.com/toggleClass/

There is also a duration that you can specify using toggle class. This should be what you are looking for.

Edit: This method requires JQuery UI to be loaded...

I updated your Fiddle adding JQuery UI and one little extra argument to toggleClass: https://jsfiddle.net/pnjpj3uo/13/

$('.click1').find('a[href="#"]').on('click', function (e) {
e.preventDefault();
this.expand = !this.expand;
$(this).text(this.expand?"Hide Content":"Read More");
$(this).closest('.click1').find('.smalldesc, .bigdesc').toggleClass('smalldesc bigdesc', 1000, 'swing');});