Position Div onClick, and hide when clicked outside

Question

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 clicking anywhere outside of the .toggleBox div.

I would like to toggle the box so that it is hidden or shown depending on it's current state and whether the click occured inside .toggleBox or outside of it.

Here is a fiddle http://jsfiddle.net/SJVz5/

Here is the HTML, JavaScript, and CSS:

HTML:

<div class="container">
    <label for="myInput">Click in input</label>
    <input type="text" class="js-input" id="myInput" />
    <div class="toggleBox">
        Some information
    </div>
</div>

JavaScript:

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

CSS:

.container {
    position: relative;
}

.toggleBox {
    position: absolute;
    top: -99999px;
    left: 99999px;
    padding: 15px;;
    border: 1px solid black;
}

Answer 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();

Answer 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();
});