How to show/hide a div animatedly?

Question

It is a dumb question, but I can't figure it out..

I want to show the div smoothly (slide down) when a link is clicked and hide it (slide up) when any other part of the page is click or the page is scrolled.

Answer 1

Use slideToggle, easier for you:

JSBIN Demo

Slide Toggle

Answer 2

If you can use jQuery, you can work with .slideDown('slow') method for example.

Usage:

$( 'a#myLink' ).click( function() {
    $( '#myDiv' ).slideDown( 'fast' );
});

See jsFiddle demo.