Hello all,

I always wonder why people get there website loaded with 70kbs JS libs for only a couple of Effects !

So here is my script to slide down a div made only of a few lines of Javascript.

If you are looking for a tutorial on how to use jQuery sliding function click here

here is how you call it

doSlide(idOfDomElement);

now the code

function doSlide(id){
timeToSlide = 50; // in milliseconds
obj = document.getElementById(id);
if(obj.style.display == "none"){ // if it's allready hidden we slide it down
	obj.style.visibility = "hidden";
	obj.style.display = "block";
	height = obj.offsetHeight;
	obj.style.height="0px";
	obj.style.visibility = "visible";
	slideDown(obj,0,height,Math.ceil(height/timeToSlide));
} else {
	slideUp(obj,Math.ceil(obj.offsetHeight/timeToSlide),obj.offsetHeight);
}
}

function slideDown(obj,offset,full,px){
if(offset < full){
	obj.style.height = offset+"px";
	offset=offset+px;
	setTimeout((function(){slideDown(obj,offset,full,px);}),1);
} else {
	obj.style.height = full+"px"; //If the data inside is updated on runtime you can use auto instead...
}
}

function slideUp(obj,px,full){
	if((obj.offsetHeight-px) > 0){
		obj.style.height = obj.offsetHeight-px+"px";
		setTimeout((function(){slideUp(obj,px,full);}),1);
	} else {
		obj.style.height=full+"px"; // we reset the height if we were to slide it back down
		obj.style.display = 'none';
	}
}

That’s all there is to it !

Demo

Tested with IE7 and FF3

Updated to add the a slide up function

Share

Related Posts: