Q:

How to create sliding DIV on click? 

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?  

A:

Making use jQuery's slideToggle() method could help you do this. 
Example
HTML:
<div id="contact">
    Contact me! 
</div>
<a href="#" id="toggle">Contact</a>

CSS: 
#contact
{
    display: none;
    background: grey;
    color: #FFF;
    padding: 10px;
}

JavaScript:
$(function()
{
     $("a#toggle").click(function()
     {
         $("#contact").slideToggle();
         return false;
     }); 
});

A:

If you don't want to use jQuery and you can stick to modern browsers you can try:
Demo: http://jsfiddle.net/ThinkingStiff/EVyE8/
HTML:
<div id="slide">click me</div>

CSS:
#slide {
    height: 50px;
    transition:             height 500ms ease;
        -moz-transition:    height 500ms ease;
        -ms-transition:     height 500ms ease;
        -o-transition:      height 500ms ease;
        -webkit-transition: height 500ms ease;
}

Script:
document.getElementById( 'slide' ).addEventListener( 'click', function() {

    this.style.height == '50px' || this.style.height == ''
        ?  this.style.height = '150px' 
        : this.style.height = '50px';

}, false );

A:

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:
<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>

