title: Open/close with one button and close on clickOutside with jQuery
body: <p>I have a problem with a button. I have searched the archive, but coudn't seem to find a proper solution.</p>
  
  <p>I would like the button to open and close the header and at the same time I also wan't to close the header when clicked outside the header</p>
  
  <p>As you can see on my example: <a href="http://www.danieldoktor.dk/test/test.html" rel="nofollow">http://www.danieldoktor.dk/test/test.html</a></p>
  
  <p>I can't get it to function correctly.</p>
  
  <p>Here's the code I can't get to work.</p>
  
  <pre><code>&lt;div class="lists"&gt;
      &lt;header class="box_header" id="box1"&gt;
          &lt;h1&gt;HEADER 1&lt;/h1&gt;
          &lt;div class="setting" id="btn1"&gt;&lt;/div&gt;
          &lt;/header&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>$(document).ready(function(){  
  
      //When mouse rolls over
      $("#btn1").click(function () { 
          $("#box1").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'})  
      });  
  
      //When mouse is removed
      $("#btn1").mousedown('', function(){  
          $("#box1").stop().animate({height:'30px'},{queue:false, duration:1000, easing: 'easeInBack'})  
      });
  
  
      $("#box1").hover('', function(){  
          $("#box1").stop().animate({height:'30px'},{queue:false, duration:1000, easing: 'easeInBack'})  
      });
  </code></pre>
  
  <p>Can any of you help?</p>
  
  <p>Daniel</p>