How can i hide an element by clicking anywhere except on that element

Question

i’m using jQuery’s toggle method to hide/show a page element when another page element is clicked on.

jQuery('a#mobile-search-icon).click(function(){
    jQuery(‘#searchBox’).toggle('slow');
});

but in addition to that, if the user clicks anywhere on the document except for that element, i’d like that element to fadeout. what’s a line of code to use for that?

my pseudo code would read something like,…

$(‘anywhere except #searchBox’).click(function(){
    $(‘#searchBox’).fadeOut();
})

i know there’s a jQuery not selector but i’d prefer to use something else. the not selector would be too processor intensive.

possible duplicate of [Use jQuery to hide a DIV when the user clicks outside of it](http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it) — George, Nov 20 '14 at 20:34
There is even a community wiki answer for this: http://stackoverflow.com/questions/152975 — Evan Davis, Nov 20 '14 at 20:43

Charlie G · Answer 1 · 2014-11-20T20:40:33.987

1

Check the whole document for clicks. If the target of a click isn't your element, do what you gotta do.

$(document.body).click(function(e) {
    if ($(e.target).attr('id') != 'searchBox') {
        $('#searchBox').fadeOut();
    }
})

Echoing John Smith for completeness:

$(document.body).not("#searchBox").click(function() {
    $('#searchBox').fadeOut();
})

edited Nov 20 '14 at 20:40

answered Nov 20 '14 at 20:21

Charlie G

814
9
22

Shouldn't there be a ! operator in that if conditional? Since he wants to click anywhere except the element. Oops, looks like you changed it while i was commenting ;) – Eric Guan Nov 20 '14 at 20:23
@EricGuan yessir, I was fixing that as you commented :) thanks – Charlie G Nov 20 '14 at 20:24
Also can be used `on()` function created exactly for nodes comparison. ref: http://api.jquery.com/is/ – Boris Zagoruiko Nov 20 '14 at 20:39

score 0 · Answer 2 · edited Nov 20 '14 at 21:13

0

You could use

$('body').on('click',function()
{
    $('.notwanttotriggerhideclass').fadeOut();//hide your element
}) ;

and then return false on the selector you do not want to hide:

$('.notwanttotriggerhideclass').on('click',function()
{

    return false;

});

or detect the class on the body on click function and hide your class:

$('body').on('click',function()
{
    if ($(e.target).attr('class') != 'notwanttotriggerhideclass')) 
    {
        $('.notwanttotriggerhideclass').fadeOut();//hide your element
    }

}) ;

edited Nov 20 '14 at 21:13

Charlie G

814
9
22

answered Nov 20 '14 at 20:26

RobertoNovelo

3,347
3
21
32

Why do you use `on()` function in such carrying notation (i mean $('body').on)('click'.. ) ? Just interesting – Boris Zagoruiko Nov 20 '14 at 20:35
What do you sir mean? @GlenSwift – RobertoNovelo Nov 20 '14 at 21:25
If you mean the ) after the on, it was a typo, btw thanks for your revision! – RobertoNovelo Nov 21 '14 at 17:32

caulitomaz · Answer 3 · 2014-11-25T15:47:41.983

0

Assuming you are using this behavior when deselecting an input tag, you are looking for the 'blur' event:

$( "#searchBox" ).blur(function() {
  $(this).fadeOut();
});

This would also fire when the user was using the input tag and presses TAB, for instance, which is super cool.

EDIT: The not so bad way to do this, assuming you are not using an input would be something like:

$('body').not("#searchBox").click(function() { $("#searchBox").fadeOut(); });

edited Nov 25 '14 at 15:47

answered Nov 20 '14 at 20:31

caulitomaz

2,141
14
20

Care to elaborate on why `.not()` would be "really really bad"? – mc01 Nov 20 '14 at 20:38
@mc01 `.not()` isn't really really bad... this answer used to say something like `'body *'` as the selector. Using `*` is "really really bad" – Charlie G Nov 20 '14 at 20:45
Ah ok - that makes more sense :) – mc01 Nov 20 '14 at 20:51
@mc01 - 1 - Wrapping elements for $( "#searchBox" ) will trigger a click and 2- Tab action will not trigger the required behavior, but charlieg is right, the answer stated a ludicrous selector at first :) – caulitomaz Nov 21 '14 at 12:19

score 0 · Answer 4 · answered Nov 20 '14 at 20:34

0

Use a "not" such as:

$(document.body).not("#searchBox").on("click", someFunction...

answered Nov 20 '14 at 20:34

John Smith

591
4
15

How can i hide an element by clicking anywhere except on that element

4 Answers4