I have a div tag element and a hide/show button above it.  I'm able to handle the hide show of the contents all right via the button, but I want the div to be hidden when someone clicks anywhere else in the document, save inside the div area itself.  

 

This functionality is similar to what you see on the sign on panel in twitter.com.   Press the sign in, the div sign in panel displays.  Press the sign in link OR anywhere else on the document outside the panel.   The panel is hidden.  

 

What's the best way to script this functionality in jquery?