Stackoverflow - How to create sliding DIV on click?

http://stackoverflow.com/q/8101284/918414

HTML

<div class="slider">i am teh slidah!! :D</div>
<div class="content">and i am the content XD</div>
<div id="expander">click me to expand/hide the slidah! :O</div>

CSS

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

JavaScript

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");
  }

});