title: Javascript -- how to click anywhere on page to hide opened div
body: <p>I have a javascript that opens up a hidden div:</p>
  
  <pre><code>&lt;script&gt;
  function dropdown() 
  { document.getElementById("login_dropdown").style.display="block"; }
  &lt;/script&gt;
  </code></pre>
  
  <p>The html is:</p>
  
  <pre><code>&lt;div onclick="dropdown()"&gt;
  &lt;div id="login_dropdown"&gt;STUFF&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS is: </p>
  
  <pre><code>&lt;style&gt;
  #login_dropdown {
  width: 150px;
  display:none;
  }&lt;/style&gt;
  </code></pre>
  
  <p>Using javascript alone, how can I hide this div when I click anywhere else on the page, <strong>excluding</strong> the opened DIV itself.</p>