jquery: div hide/show on focus issue

Question

Thanks to inti\'s code I was able to figure out the answer!

jQuery:

$(document).ready(function(){
    $(\"body\").click(function(e) {
          


        

Answer 1

I think you r looking something like this...

HTML:

<a href="#">Click Me</a>

<div id="login">
    <label>Username:</label><input type="text"/><br/>
    <label>Password:</label><input type="password"/><br/>
</div>

jQuery:

$(document).ready(function(){
   $("#login").hide();
    $('a').bind('click', function() {
        $("#login").toggle().focus();
    });
    $("input").focusout(function(){
        $("#login").hide();
    });
});

http://jsfiddle.net/anish/ccFt9/1/

Answer 2

The event you are looking for is .blur() not .focusout().

Edit: click out of #mydiv to hide it:

$("body").click(function(e) {
    if ($(e.target).closest("#mydiv").size() == 0) {
        $("#mydiv").hide();
    }
});

This hides #mydiv if what you clicked doesn't have it as one of it's parents.