Hiding a div by selecting anywhere outside of it
<p>I'm trying to find a way to display a hidden div via clicking a button, and hiding it the same div if the button is clicked again, or if the user clicks anywhere outside of the div. The function is very similar to the function seen in notifications icon in Facebook.</p>

<pre><code>    $('.button').click(function() {
        if($(".div").css('visibility') == 'visible') 
            $(".div").css('visibility', 'hidden');
        else
            $(".div").css('visibility', 'visible');
    });

    $(".button").click(function() {
        event.stopPropagation();
    });

    $('html:not(.div)').click(function() {
        //Hide the div if visible
        if($(".div").css('visibility') == 'visible') 
            $(".div").css('visibility', 'hidden');
    });
</code></pre>

<p>However, this doesn't seem to work in Firefox/IE, only in Chrome. The div fails to display at all in firefox/IE. Does anyone have an idea of a better way to go about this?</p>

<p>Thanks!</p>
