jquery - Sliding animation to the load template -

jquery - Sliding animation to the load template -

html:

<button id='btn'>click</button>

main.html:

<div id="main"><p>hai main..</p></div>

sub.html

<div id="sub"><p>hai sub..</p></div>

js:

$(document).on("click", "btn", function(e) { e.preventdefault(); var toggler = $('#main'), wrapper = toggler.find('#sub'); if(wrapper.length==0){ toggler.load("sub.html"); } else{ toggler.load("main.html"); } });

the template load working fine, trying add together sliding event template when gets load. tried $toggler.load("sub.html").slideup()

the template should load animation slideup on button click 1 time again on button click should slide down. how can this?

$(document).on("click", "#btn", function(e) { e.preventdefault(); var toggler = $('#main'), wrapper = toggler.find('#sub'); if(wrapper.length==0){ toggler.load("sub.html").slidetoggle(); } else{ toggler.load("main.html").slidetoggle(); } });

demo:

http://jsfiddle.net/y9avm/

jquery html css css3