I want to click a button to toggle div slideUp & slideDown and quick anywhere else on the page to close the div

Question

I have a button #clickme. When clicked a div #cart slides up, when clicked again it slides down.

I also want to be able to close it by clicking anywhere else on the page apart from #cart or #clickme.

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.

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.

What's an elegant way around this?

$('#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");
   } 
});

Answer 1

Since you're binding a click event to the document.body, your click event bound to #clickme bubbles up to the document and triggers your handler there.

You need to call .stopPropagation() within your #clickme event handler:

$('#clickme').click(function(e) {
   e.stopPropagation();

   if ($("#cart").is(":hidden")) {
       $("#cart").slideDown("slow");
   } else {
       $("#cart").slideUp("slow");
   }
});

That will prevent the click event bubbling up the DOM.

Sitenote: You should seriously have a read about Caching DOM references. You're querying the exact same element like 6 times in that little piece of code. Do it once

var $cart = $('#cart');

and use $cart from there on. A lot of performance can be gained there.

Example: http://www.jsfiddle.net/EuzyL/1/

Answer 2

Try this,

var toggleThis = function() {
   if ($("#cart").is(":hidden")) {
       $("#cart").slideDown("slow");
   } else {
       $("#cart").slideUp("slow");
   }
};

$('#clickme').click(toggleThis);
$('#clickme').blur(toggleThis);

$(document.body).click(function () {
   if ($("#cart").not(":hidden")) {
       $("#cart").slideUp("slow");
   } 
});

Happy Coding.

Answer 3

As jAndy states the problem is event bubbling here, but you since you asked "is there a more elegant way", yes there is :)

If we take advantage of .slideToggle() and the :visible selector, your code comes very terse indeed, you can do this:

$('#clickme').click(function(e) {
  $("#cart").stop(true, true).slideToggle("slow");
  e.stopPropagation();
});

$(document).click(function () {
  $("#cart:visible").stop(true, true).slideUp("slow");
});

.slideToggle() does almost exactly the check you're doing, The difference is it checks when it gets there, so in the case of queued animations it's even better. And by using :visible we're only selecting #cart if it's visible and needs sliding up, otherwise there's nothing selected. The .stop() call is just to prevent animation queue-up for fast clicks, test it out and see what behavior you want, this part is optional.

And last the event.stopPropagation() call is to prevent the click event from bubbling up to document and triggering it's .click() handler, (click here for more info on that).