Question

Is there any event that can be called whenever the user clicks outside the div to hide that div?

I tried using $(document).click(), however that one is called even when the user clicks the link which is supposed to show the div. Hence, the click handler event shows the div, and immediately $(document).click() hides it, which means the div is never displayed.

Ideas?

Answer 1

You can try delegating the onclick event handler to the body element (or other suitable parent container) and test for whether the target element is the reveal link:

$("body").click(function(e) {
    if(e.target.id == "idOfLinkToShowDiv") {
        $("#idOfTheDiv").show();
    } else {
        $("#idOfTheDiv").hide();
    }
});

The above can be shortened using .toggle:

$("body").click(function(e) {
    $("#idOfTheDiv").toggle(e.target.id == "idOfLinkToShowDiv");
});

Another way:

$("body").click(function() {
    $("#idOfTheDiv").hide();
});

$(".showLink").click(function(e) {
    e.stopPropagation();
    $("#idOfTheDiv").show();
});