How does one close an overlay by clicking outside of the overlay?

Question

I have a jquery drop down that activates and deactivates when you click the header for the drop down

$j('#category_header').click(function() {
    $j('#category_dropdown').slideToggle("fast");
    return false;
});

but I want it to also close when I click anywhere on the page that isnt the drop down. How do I go about doing that?

possible duplicate of [How to detect a click outside an element?](http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element) — Chris Van Opstal, Jun 11 '10 at 17:06

score 2 · Answer 1 · edited May 23 '17 at 12:07

2

edited May 23 '17 at 12:07

Community

answered Jun 11 '10 at 16:52

SBUJOLD

score 0 · Accepted Answer · answered Jun 11 '10 at 17:37

0

Got it

$j(function() {
    $j('body').click(function() {
        $j('#category_dropdown').slideUp("fast");
        return false;
    });

});

answered Jun 11 '10 at 17:37

NullVoxPopuli

Looking at the difference between the code you put in the comment above and this one, I'm assuming that it wasn't working because the body tag was not ready yet when this code was being executed, now you wrapped it up in a document.ready event so it will work :) Remember that jQuery will 'gracefully' fail meaning that if the selector you pass it does not return any elements, it just won't do anything instead of causing errors, this can be misleading as to why something doesn't seem to work when in fact the code was never executed. – SBUJOLD Jun 11 '10 at 18:02
Also, now that I mentionned about the ready event, the `live()`method to bind handler will often solve that problem and is really useful on very dynamic pages. – SBUJOLD Jun 11 '10 at 18:05

2 Answers2