jquery slide down div on link click, then slide up when clicking outside of div

Question

Anyone know how I can have a link which when clicked slides down a div, then the div slides back up when anywhere outside the div is clicked ?

Thnx in advance.

Scott.

Answer 1

Try this:

$(".clicker").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    // do your worst, i.e. slide down
    $("div").slideDown("slow");
});

$(document).click(function() {
    // slide up
    $("div").slideUp("slow");
});

And just to make sure the div is not affected either:

$("div").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
});

Answer 2

Try this:

$(".target").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    $(".class").toggle();
});

Answer 3

Found a very good answer by Frederik in Document click not in elements jQuery

Modified a bit to support elements not yet present in document for example elements fetched by ajax calls.

$(document).on('click',function(event) {
    if (!$(event.target).closest("#selector").length) {
        if ($('#selector').is(":visible"))
            $('#selector').slideUp();
    }
});