close on click outside

by Seetpal Singh

HTML

<div id='clickable_drop'>
    <div>Click here</div>
    <div class='oops'>Successfully clicked inside
        <br/>Now click outside</div>
</div>

CSS

.oops {
    display:none;
    background:#eee;
    padding: 6px;
}

JavaScript

$(document).ready(function () {
    $('#clickable_drop').click(function () {
        $('.oops').show();
    })
}).click(function (e) {
    var container = $("#clickable_drop");

    if (!container.is(e.target) // if the target of the click isn't the container...
    &&
    container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.find('.oops').hide();
    }
});