A simple div slide down JS script

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

Demo

Tested with IE7 and FF3

Updated to add the a slide up function

Related Posts:

• Animated scroll to anchor/id function with jQuery
• Div Slide the really easy way with jQuery
• Using JQuery Validation plugin with tooltips
• How to add image tagging the facebook way !
• How to disable context menu on right click with jQuery

beginner div down effect hide javascript jquery js show slide tutorial up

This entry was posted by Christophe Verbinnen on February 22, 2009 at 6:13 pm, and is filed under javascript. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site.

29 comments

• 

  Web Design Sydney (61 days)

  Thanks for the code. Best !

  Reply ↓
• 

  Gene (658 days)

  Is it possible to use this script in a “vertical” drop-down menu? I just want my menu to slide down instead of sliding over. It just takes up too much space. Sorry, I am a beginner at javascript and can’t seem to grasp the CSS portion of it all, after already creating a code for the styling. I just want to add a simple function for a CSS vertical drop-down menu that is both easy to use and to understand.

  Reply ↓
• 

  Andrew (725 days)

  Hey Christophe, thank you very much for your tips. I’ve already solved the problem with some other solution.

  Nevertheless there is one question left

  Is there any way to make the content of the div to slide down synchronously with the div?

  here is the way I’ve optimized the script for my needs:

  It’s certainly far away from being perfect I am very new to Javascript, but trying to do my best.

  function doSlide(id,id2,id3,id4,id5,id6){
  timeToSlide = 120; // in milliseconds
  obj = document.getElementById(id);
  obj2 = document.getElementById(id2);
  obj3 = document.getElementById(id3);
  obj4 = document.getElementById(id4);
  obj5 = document.getElementById(id5);
  obj6 = document.getElementById(id6);

  if(obj.style.display == “block”){

  slideUp(obj,Math.ceil(obj.offsetHeight/timeToSlide),obj.offsetHeight);

  } else {

  obj2.style.display = “none”;
  obj3.style.display = “none”;
  obj4.style.display = “none”;
  obj5.style.display = “none”;
  obj6.style.display = “none”;
  obj.style.display = “block”;
  obj.style.visibility = “visialbe”;
  height = obj.offsetHeight;
  obj.style.height=”0px”;
  pxPerLoop = height/timeToSlide;
  slideDown(obj,0,height,Math.ceil(height/timeToSlide));

  }
  }

  function slideDown(obj,offset,full,px){
  if(offset 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’;
  }
  }

  Big thanks in advance.

  Andrew

  Reply ↓
• 

  Christophe Verbinnen (726 days)

  1) try to alert(obj.style.display) in doSlide after obj = …;
  2) you’ll have to add something like
  if(currentDiv != ”){
  document.getElement.byId(currentDiv).display = ‘none’;
  }
  var currentDiv = id

  Reply ↓
• 

  Andrew (726 days)

  Hello Christophe,

  it\’s brillian scipt u\’ve made there.

  Nevertheless I have a couple of questions, and it would be great, if you could help me out.

  1) I have a strange bug: when I load the page for the first time (or just refresh it) and then click on the button to perform the slide script for a hidden (display:none) div, then nothing happens untill I press the button for the second time. After I\’ve \"doubleclicked\" the button once, it works flawlessly untill I reload the page. This problem doesn\’t occur if the div which is supposed to slide has no \"display:none\" tag set.

  2) I would like to have multiple divs which slide down from the same position when u press different buttons: For Example: I have buttons \"Contact\", \"Products\" and \"Materials\"
  So when I press \"Contact\" a div \"Contactdiv\" should slide down. Then if I press \"Products\" the div \"Contactdiv\" should (disappear) and the div \"Productsdiv\" shoud slidedown at its position instead. At the moment it works in the way, that all the divs just slidedown one after another in a vertical line. So I have to force them to (disappear) manualy, but pressing the assigned buttons again.

  Big thanks in advance.

  Andrew

  Reply ↓
• 

  Webtasarım (753 days)

  Thanks for the script.

  Reply ↓
• 

  Christophe Verbinnen (852 days)

  @Vidha
  Hello vidha,

  you don’t have to do anything particular for multiple instance.

  Just call up the function with the div id in as argument and it will slide only that particular div.

  You can use it with a “virtually” unlimited number of divs…

  Reply ↓
• 

  Vidha (852 days)

  Hi Chris,
  Thanks for the script, how would multiple instances work?

  Reply ↓
• 

  Christophe Verbinnen (857 days)

  Tom :

  Thanks for sharing this very useful and minimal script!

  I would love to get my hands on the script that slides back, but the link is broken. Any chance you still have that script?

  It’s done

  Reply ↓
• 

  Tom (857 days)

  Thanks for sharing this very useful and minimal script!

  I would love to get my hands on the script that slides back, but the link is broken. Any chance you still have that script?

  Reply ↓
• 

  Eqqo (889 days)

  Hello all,

  I improved the script a bit so that the element also slides back.
  When the element’s display is none it slides open.
  When the element’s display is other that none it slides back.

  You can find the script here:
  http://www.guitardistrict.net/modules/jscripts/slide.js

  cheers!

  Reply ↓
• 

  ShakE (900 days)

  This is a great written and simple javascript script.
  Congratulations on your excellent work

  Reply ↓
• 

  Christophe Verbinnen (913 days)

  @MBicking
  Basicly you just have to make a div with a ID

  <div id="idOfYourChoice">some content</div>

  and then if you want to slide it like in the demo for example you just have a to make a link like

  <a href="javascript:doSlide('idOfYourChoice')" >Slide my Div</a>
  

  If you want the div to start as hidden you will have to use display:none; in the CSS of your div.

  Reply ↓
• 

  MBicking (913 days)

  @Christophe Verbinnen
  I can get the script into the page, it’s calling it that I’m confused about. (Remember, I’m new to this,…) it looks like I need to assign an id to the div element, but the syntax on getting script to apply to that id is where I have problems. And should the script go in the header or body, or does it matter? (Apologies for taking up your time on such a simple question, but this isn’t my area of expertise, as you can tell.)

  Reply ↓
• 

  Christophe Verbinnen (914 days)

  Well it’s quite simple, basicly you have two ways of adding this function to your page.

  1. you can just copy/paste the code in

  2. or you can create a file called whateveryouwant.js and load it with this line
  in between your tags

  here is a usefull link I just found on google.
  http://www.howtocreate.co.uk/tutorials/javascript/incorporate

  Reply ↓
• 

  MBicking (914 days)

  OK, I’m at a way lower level of programming, but this looks like it’s something even I could handle. But having done only very simple scripts, I need a primer on these calls. I’m sure it is simple, but is there a tutorial I can look at? I have Dreamweaver and know how to use it (for basic things).

  Reply ↓
• 

  qyneprox (916 days)

  it’s almost similar like script spoiler i think
  but it’s nice tuto

  Reply ↓
  • 

    Christophe Verbinnen (914 days)

    Thanks,

    What is script spoiler ?
• 

  Christophe Verbinnen (917 days)

  @dansk

  function doSlide(id){
  	timeToSlide = 150; // in milliseconds
  	obj = document.getElementById(id);
  	if(obj.style.display == "none"){ // if it's hidden we slide it
  		obj.style.visibility = "hidden";
  		obj.style.display = "block";
  		height = obj.offsetHeight;
  		obj.style.height="0px";
  		pxPerLoop = height/timeToSlide;
  		slide(obj,0,height,pxPerLoop);
  	} else {
  	obj.style.display = "none";
  	}
  }
  
  function slide(obj,offset,full,px){
  	if(offset < full){
  		obj.style.height = offset+"px";
  		offset=offset+px;
  		setTimeout((function(){slide(obj,offset,full,px);}),1);
  	} else {
  		obj.style.visibility = "visible";
  		obj.style.height = full+"px";
  	}
  }
  

  that should work for you !

  Reply ↓
• 

  dansk (919 days)

  That\’s brilliant!
  A couple of questions for someone whos not that code savy…
  How can i make the div content stay hidden until it slides down fully?

  And for some reason it doesn\’t seen to work with images?

  thanks

  Reply ↓
• 

  Luqman (949 days)

  Hi All please add in the container which sliding down as overflow:hidden; in css!

  Thank you for the useful and less content code http://www.djpate.com team…

  Reply ↓
• 

  memory (1017 days)

  yes, it doesn’t go in the if

  tried alert in the if, no alert message appears, when I click the link first time

  but don’t bother with this, it’s just small thing

  Reply ↓
• 

  Christophe Verbinnen (1017 days)

  Apparently it doesnt go in the if

  if(obj.style.display == “none”){

  try to alert(obj.style.display); to see what it outputs…

  Reply ↓
• 

  memory (1020 days)

  hi,

  your code is great, but i have one problem
  if i use display property (display:none) in css file for selected div i have to click twice on link to make this effect
  but if i use this property inline (directly in code) i haven\’t this error

  can i somehow eliminate this problem?

  i have tested this in FF3, IE7, IE6, Chrome and Opera…all browsers have same behavior

  memory

  Reply ↓
• 

  bankai (1049 days)

  brilliant

  Reply ↓
• 

  Christophe Verbinnen (1049 days)

  As I said, I only tested it on IE7 and FF3 I would be glad to hear your comment if you have the opportunity to test it on some other browsers.

  It’s some pretty generic JS so it shoud work.

  As far as beeing as efficient as other slides , I think it depends on what you plan on doing with it.
  For a simple slide it does the trick for me but maybe people would like something more tweakable.

  Reply ↓
• 

  Anonymous (1049 days)

  But, you sure it’ll work on all browsers and be efficient as other sliders which use libraries?

  Reply ↓
• 

  Anonymous (1056 days)

  WOW!!! Omg! No need for any libraries! Thanks!

  Reply ↓
• 

  alberto (1074 days)

  Congrats for the code; light, fast and simply!

  Reply ↓

• Search

  Search Website

• Great website templates

  

• Ads

• Latest posts

  • Using rowCount with the sqlite driver of PDO.
  • How to generate a word docx from a template with PHP ?
  • How to compile Spawner the Sql data generator on Ubuntu
  • How to make cross-domain ajax request using jsonp & jquery
  • How to setup Xdebug on ubuntu 10.10

• Last comments

  • Julian on Animated scrollto effect jQuery plugin
  • Ram on Import Gmail Address book with Curl and PHP
  • Leandro on Using JQuery Validation plugin with tooltips
  • Leandro on Using JQuery Validation plugin with tooltips