title: jquery: div hide/show on focus issue
body: <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>