jquery: div hide/show on focus issue
<p>Thanks to <strong>inti's</strong> code I was able to figure out the answer! </p>

<p>jQuery:</p>

<pre><code>$(document).ready(function(){
    $("body").click(function(e) {
        //checks to see if the tag you clicked has the #login
        //div as a parent.
        if($(e.target).closest("#login").size() == 0) {
            //makes exception for the #login's &lt;a&gt; tag (id of a_login)
            if((e.target.id) == 'a_login') {   
                $("#login").show();
            } else {
                $("#login").hide();
            }
        //if target has #login as parent, keep it visible   
        } else {
            $("#login").show();
        }
    });

});
</code></pre>

<p>Working jsfiddle example: <a href="http://jsfiddle.net/SuperPhil/3CmE7/" rel="nofollow">http://jsfiddle.net/SuperPhil/3CmE7/</a></p>

<p>Thanks!</p>

<hr>

<p>I am trying to have a login screen similar to the <a href="http://dropbox.com" rel="nofollow">http://dropbox.com</a> login. Where a user clicks on the login link and a div appears (CSS) and when focus out, disappears.</p>

<p>Here is my jQuery</p>

<pre><code>$('#login').bind('click', function() {
    $('#login').addClass("clicked").focusout(function() {
        $('#login').removeClass('clicked');
    });
});
</code></pre>

<p>This doesn't work. Can anyone help me out?</p>

<p><strong>EDIT:</strong></p>

<pre><code>$('#login').click(function() {
    $('#login div').addClass("clicked").blur(function() {
        $('#login div').removeClass('clicked');
    }); 

});
</code></pre>
