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

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:

click me

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