I want to click a button to toggle div slideUp & slideDown and quick anywhere else on the page to close the div
<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>
