Question

In the below screenshot you will see a large green rectangle. This division is shown when clicking a “My Account” link. It can then be hidden by clicking a “Hide” image.

Screenshot: http://knowwhovotes.com/somecap.JPG

I would like the green division to be hidden if a user clicks anywhere outside of the division. I have tried the blur function but could not get it working properly.

Here is the code I have already:

<script>
$(document).ready(function() {
    $("#my_account_button").click(function() {
        $("#c_fancy").css({'display' : 'block'});
        $("#my_account").slideDown("Slow");
    });
    $("#hide_account").click(function() {
        $("#c_fancy").css({'display' : 'none'});
        $("#my_account").slideUp("Slow");
    });
});
</script>

Answer 1

First, focus/blur are generally only for input elements. They do not fire for div elements.

You need to have the div be hidden when you click on the document, but not when you click on the div itself or anything in it. To do this, add a click handler to the document, and then stop clicks on the div from propagating up the DOM tree, like this:

$(document).ready(function() {
    $("#my_account_button").click(function() {
        $("#c_fancy").css({'display' : 'block'});
        $("#my_account").slideDown("Slow");
    });
    $("#hide_account").click(function() {
        $("#c_fancy").css({'display' : 'none'});
        $("#my_account").slideUp("Slow");
    });

    $(document).click(function() {
        $("#c_fancy").css({'display' : 'none'});
        $("#my_account").slideUp("Slow");
    });
    $("#c_fancy").click(function(e) {
        e.stopPropagation();
    });
});

You probably then want to consolidate and put the hide code in a common function:

$(document).ready(function() {
    $("#my_account_button").click(function() {
        $("#c_fancy").css({'display' : 'block'});
        $("#my_account").slideDown("Slow");
    });

    function hideAccount() { 
        $("#c_fancy").css({'display' : 'none'});
        $("#my_account").slideUp("Slow");
    }

    $("#hide_account").click(hideAccount);
    $(document).click(hideAccount);

    $("#c_fancy").click(function(e) {
        e.stopPropagation();
    });
});

I do notice that the content behind the div is darkened. This could cause problems if this darkening overlay is part of your #c_fancy element. If so, you need to change your code a bit. Basically, you would need to change the above code from $(document) to $('#myOverlay'), substituting #myOverlay appropriately of course.