javascript - Bottom divs jumping on click -

my bottoms divs jumping , down when click on div box next 1 thats clicked

heres link fiddle

http://jsfiddle.net/abtph/17/

heres jquery

 $('li').on('click', function(e){   var active = $(this).siblings('.active');   var postop = ($(this).position()).top;   if (active.length > 0) {     var activetop = (active.position()).top;   if (activetop == postop) {     active.toggleclass('active', 400).find('.outer').fadeout('slow');     $(this).find('.outer').fadein('slow');   } else {     $(this).siblings('.active').toggleclass('active', 400).find('.outer').slidetoggle();     $(this).find('.outer').slidetoggle();   }   } else {     $(this).find('.outer').slidetoggle();    }    $(this).toggleclass('active', 400);   }); 

i think has toggleclass unsure on how fix this.....i dont want box jump , down when click on next box

@rickyahn

check out fiddle think need.

fadein new active block , on completion fadeout active one; way no jiggle.

updated line shown below:

$(this).find('.outer').fadein('slow', function(){ active.toggleclass('active', 400).find('.outer').fadeout('slow', function () {});