Hide a DIV when it loses focus/blur

Question

I have a JavaScript that displays a DIV (sets its display css property from 'none' to 'normal'. Is there a way to give it focus as well so that when I click somewhere else on the page, the DIV loses focus and its display property is set to none (basically hiding it). I'm using JavaScript and jQuery

And what html/jQuery are you using? Can you link to a live demo (perhaps [JS Fiddle](http://jsfiddle.net/) or [JS Bin](http://jsbin.com/))? — David Thomas, Mar 17 '11 at 10:33
duplicate, I think: http://stackoverflow.com/questions/4629774/hide-div-on-blur — Sergey, Mar 17 '11 at 10:44
I think e.stopPropagation() is the key as per mentioned in link by Sergey — bcm, Mar 17 '11 at 10:49
`normal` isn't a property value for `display`. So please visit the [W3C website][1] to find the valid values. [1]: http://www.w3schools.com/css/pr_class_display.asp — AmbrosiaDevelopments, Mar 17 '11 at 11:43

score 21 · Accepted Answer · answered Jan 07 '13 at 10:36

For the hide the div when clicking any where on page except the selecteddiv

$(document).not("#selecteddiv").click(function() {
        $('#selecteddiv').hide();
    });

if you want to hide the div with lost focus or blur with animation then also

$("#selecteddiv").focusout(function() {
        $('#selecteddiv').hide();
    });

with animation

$("#selecteddiv").focusout(function() {
    $('#selecteddiv').animate({
        display:"none"
    });
});

May this will help you

somehow attaching it on 'body' and not 'document' work for me. I suppose document is object — Zohaib, Jul 30 '13 at 12:14

score 5 · Answer 2 · answered Feb 07 '13 at 01:36

The examples already given unfortunately do not work if you have an iframe on your site and then click inside the iframe. Attaching the event to the document will only attach it to same document that your element is in.

You could also attach it to any iframes you're using, but most browsers won't let you do this if the iframe has loaded content from another domain.

The best way to do this is to copy what's done in the jQuery UI menubar plugin.

Basic example HTML:

<div id="menu">Click here to show the menu
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li><a href="#">Item 3</a></li>
    </ul>
</div>

And the jQuery needed to make it work:

var timeKeeper;

$('#menu').click(function()
{
    $('#menu ul').show();
});

$('#menu ul').click(function()
{
    clearTimeout(timeKeeper);                  
});

$('#menu').focusout(function()
{
    timeKeeper = setTimeout(function() {$('#menu ul').hide()}, 150);
});

$('#menu').attr('tabIndex', -1);
$('#menu ul').hide();

What it does is give the menu a tab index, so that it can be considered to have focus. Now that you've done that you can use the focusout event handler on the menu. This will fire whenever it has been considered to lose focus. Unfortunately, clicking some child elements will trigger the focusout event (example clicking links) so we need to disable hiding the menu if any child elements have been clicked.

Because the focusout event gets called before the click event of any children, the way to achieve this is by setting a small timeout before hiding the element, and then a click on any child elements should clear this timeout, meaning the menu doesn't get hidden.

Here is my working jsfiddle example

score 3 · Answer 3 · answered Dec 23 '15 at 07:18

3

$(document).mouseup(function (e)
{
    var container = $("YOUR CONTAINER SELECTOR");

   if (!container.is(e.target)&& container.has(e.target).length === 0) 
   {
      container.hide();
   }
});

answered Dec 23 '15 at 07:18

AkshayT

2,901
2
28
32

I get container is not a function. – Ziggler Apr 16 '18 at 18:43

score 2 · Answer 4 · answered Dec 04 '13 at 10:08

Regarding mouse clicks, see the other answers.

However regarding lost focus, .focusout is not the event to attach to, but rather .focusin. Why? Consider the following popup:

<div class="popup">
  <input type="text" name="t1">
  <input type="text" name="t2">
</div>

What happens on moving from t1 to t2:

t1 sends focusout, which bubbles up to $('.popup').focusout
t2 sends focusin, which bubbles up to $('.popup').focusin

... so you get both types of event even though the focus stayed completely inside the popup.

The solution is to analogous to the magic trick done with .click:

$(document).ready(function() {
    $('html').focusin(function() {
        $('.popup').hide(); 
    });
    $('.popup').focusin(function(ev) {
        ev.stopPropagation(); 
    });
});

(side note: I found the .not(...) solution not working bc. of event bubbling).

Bonus: working fiddle click me - open the popup, then try tabbing through the inputs.

.focusin rather than .focusout?? Wow! So counter-intuitive, and yet it works both simply and beautifully. Nicely done. — LSpencer777, Apr 18 '14 at 13:15

naiquevin · Answer 5 · 2011-03-17T11:15:15.290

2

You can bind a function on click of body and check if its the current div using e.target (e is the event)

$(document).ready(function () {
  $("body").click(function(e) {     
    if($(e.target).attr('id') === "div-id") {
        $("#div-id").show();
    }
    else {
        $("#div-id").hide();
    }
  });
});

edited Mar 17 '11 at 11:15

answered Mar 17 '11 at 10:42

naiquevin

7,588
12
53
62

it doesn't work. where do i place this function? just inside a script tag? – 124697 Mar 17 '11 at 10:46
it should be written after the body is loaded.. have edited my answer. – naiquevin Mar 17 '11 at 11:17
@naiquevin It shouldn't matter where he puts it, because it's wrapped inside a `$(document).ready` call – Bram Vanroy Sep 06 '12 at 14:31

score 1 · Answer 6 · answered Sep 12 '15 at 19:38

I was also looking for this and here I found the solution https://api.jquery.com/mouseleave/. This may be useful for future readers.

The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant.

score 1 · Answer 7 · answered Aug 28 '18 at 09:33

On triggering mouseup() event, we can check the click is inside the div or a descendant and take action accordingly.

$(document).mouseup(function (e) {
    var divContent= $(".className");
    if(!divContent.is(e.target) && divContent.has(e.target).length === 0) {
        $(".className").hide();
    }
});

score 0 · Answer 8 · answered Aug 26 '15 at 07:39

0

$('.menu > li').click(function() {
    $(this).children('ul').stop().slideDown('fast',function()
    {
        $(document).one('click',function()
        {
            $('.menu > li').children('ul').stop().slideUp('fast');
        });
    });

});

answered Aug 26 '15 at 07:39

soner san

1
1

1

Can you elaborate why you think this will solve the OP's question? – Jasper Aug 26 '15 at 08:23

score 0 · Answer 9 · edited May 23 '17 at 10:30

0

I personally haven't tried blur on divs, only on inputs etc. If blur eventhandler works, it's perfect and use it. If it doesn't, you could check this out: jQuery animate when <div> loses focus

edited May 23 '17 at 10:30

Community

1
1

answered Mar 17 '11 at 10:37

daan

254
1
4

score -1 · Answer 10 · edited May 23 '17 at 12:02

-1

Showing is easy

$('somewhere').click(function {$('#foo').show();})

For hiding

How do I hide a div when it loses its focus?

edited May 23 '17 at 12:02

Community

1
1

answered Mar 17 '11 at 10:37

S L

14,262
17
77
116

score -2 · Answer 11 · edited Mar 29 '12 at 09:39

-2

With jQuery you can hide elements with hide(), ex: $("#foo").hide()

Hide element in event listener:

$("#foo").blur(function() {
    $("#foo").hide();
});

edited Mar 29 '12 at 09:39

Barry Kaye

7,682
6
42
64

answered Mar 17 '11 at 10:35

jomppapomppa

1

3

there is no blur functio for div – S L Mar 17 '11 at 10:36

Hide a DIV when it loses focus/blur

11 Answers11

Linked