title: I want to click a button to toggle div slideUp & slideDown and quick anywhere else on the page to close the div
body: <p>I have a button #clickme. When clicked a div #cart slides up, when clicked again it slides down.</p>
  
  <p>I also want to be able to close it by clicking anywhere else on the page apart from #cart or #clickme.</p>
  
  <p>The code I've attempted doesn't quite work. What happens now is that when I click #clickme, it slides up and then back down again quickly.</p>
  
  <p>I imagine what is happening is that the click event is triggered at both the document and #clickme levels, causing one effect after the other.</p>
  
  <p>What's an elegant way around this?</p>
  
  <pre><code>$('#clickme').click(function() {
     if ($("#cart").is(":hidden")) {
         $("#cart").slideDown("slow");
     } else {
         $("#cart").slideUp("slow");
     }
  });
  
  $(document.body).click(function () {
     if ($("#cart").not(":hidden")) {
         $("#cart").slideUp("slow");
     } 
  });
  </code></pre>