How to create sliding DIV on click?

Question

I am looking to create a slide out DIV, like the one here when you press \"Contact\". Does anybody know of anything similar to this?

Answer 1

yet another sample, but without jquery, and with a class add/remove approach :)

Demo: http://jsfiddle.net/1wbh8pqj/

The main idea is that you have two classes, one of them applies to the slider, and the another, says how the slider should show when it is expanded.

.slider {
    height: 0px;
    overflow: hidden;

    transition:         height 0.5s ease;
    -moz-transition:    height 0.5s ease;
    -ms-transition:     height 0.5s ease;
    -o-transition:      height 0.5s ease;
    -webkit-transition: height 0.5s ease;
}

.slided {
    height: 100px;
}

so, you have to set the 'slided' class to the slider when it has to be expanded, and remove it when the slider has to be shrinked, and using the super-mega-uber-awesome css transition, the height will smoothly change :)

var expander = document.getElementById("expander");

expander.addEventListener("click", function () {
 var slider = document.getElementsByClassName("slider")[0];

  if (slider.classList.contains("slided")) {
    slider.classList.remove("slided");
  } else {
    slider.classList.add("slided");
  }

});

ohbtw, the html:

i am teh slidah!! :D
and i am the content XD
click me to expand/hide the slidah! :O