How do you create slidedown effects like this?

Question

check this out http://heroku.com/

How do you created stuff like this?(referring to the slidedown) Do you have mouseover events for javascript or is it all css? Cud someone please give a basic outline?

Answer 1

Simple jQuery. View the source to see how

Answer 2

I use this jQuery accordion widget. It has a mouseover effect, like the one on heroku.com

http://jqueryui.com/demos/accordion/#mouseover

Answer 3

Try this if you don't need to load the entire jQuery library. A simple div slide down JS script

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';
   }
}