Position Div Onclick, And Hide When Clicked Outside

I have a div with class .toggleBox that is visibly hidden. When clicking on an input my JavaScript can show the .toggleBox div, but I am not sure how to hide the div again if clic

Solution 1:

i have updated your script , please check this out : http://jsfiddle.net/SJVz5/3/, i hope it's that you want

you have to add event.stopPropagation();

Solution 2:

Seems I'm a bit late but I have an easier answer with shorter codes http://jsfiddle.net/Godinall/SJVz5/4/

$('html').click(function () {
    $('.toggleBox').toggle().css({
        top: 22 + 'px',
        left: 91 + 'px'
    });
});

$('.toggleBox').click(function (event) {
    event.stopPropagation();
});