title: how to collapse my div panel in jquery
body: <p>When I click on outside my expanded div this div should be close.</p>
  
  <p>I have html code like</p>
  
  <pre><code>&lt;div id="panel"&gt;
  &lt;div&gt;           
          &lt;h1&gt;Welcome to jquery demo&lt;/h1&gt;
                  &lt;h3&gt;Welcome to jquery demo&lt;/h3&gt;
                  &lt;h3&gt;Welcome to jquery demo&lt;/h3&gt;
                  &lt;h3&gt;Welcome to jquery demo&lt;/h3&gt;
                  &lt;h3&gt;Welcome to jquery demo&lt;/h3&gt;
              &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="tab"&gt;
              &lt;ul class="loginleft"&gt;
              &lt;button class="sc-button g-opacity-transition sc-button-large loginButton" tabindex="0"&gt;Log in&lt;/button&gt;
  
          &lt;/ul&gt;
          &lt;ul class="login"&gt;
              &lt;li class="left"&gt;&amp;nbsp;&lt;/li&gt;
              &lt;li&gt;Hello Guest!&lt;/li&gt;
              &lt;li class="sep"&gt;|&lt;/li&gt;
              &lt;li id="toggle"&gt;
                  &lt;a id="open" class="open" href="#"&gt;More Info&lt;/a&gt;
                  &lt;a id="close" style="display: none;" class="close" href="#"&gt;Close Panel&lt;/a&gt;         
              &lt;/li&gt;
              &lt;li class="right"&gt;&amp;nbsp;&lt;/li&gt;
          &lt;/ul&gt; 
      &lt;/div&gt; 
  </code></pre>
  
  <p>js code</p>
  
  <pre><code>$(document).ready(function() {
  
      // Expand Panel
      $("#open").click(function(){
          $("div#panel").slideDown("slow");
  
      }); 
  
      // Collapse Panel
      $("#close").click(function(){
          $("div#panel").slideUp("slow"); 
      });     
  
  
      // Switch buttons from "Log In | Register" to "Close Panel" on click
      $("#toggle a").click(function () {
          $("#toggle a").toggle();
      });     
  
  });
  </code></pre>
  
  <blockquote>
    <p>how can i also close that expanded div when i clicked outside area also.</p>
  </blockquote>