Hide a div when foucs is out or clicked outside div

Question

In a html structure like this

<div class="col-sm-4 blockDiv" id="focusDiv">
    <div style="height:51px;padding:1em;background-color:white;" id="totalSel">Countries visited in last 6days?</div>
    <div style="background-color:white;" id="bg-div">
        <ul id="testMulti">
            <li>
                <span class="textinput" style="display:block;">
                    <input type="text" id="countriesVisited">
                    <label for="countriesVisited">Countries visited in last 6days?</label>
                    <input type="hidden" id="countriesVisited-val" name="countriesVisited-val" value="">
                </span>
            </li>
            <li class="selected2 mulSel"><span class="mulSel1">Indonesia</span><span class="remove">x</span>
            </li>
        </ul>
        <div style="clear:both;"></div>
    </div>
</div>

The input box is autocomplete and each country is appending to the ul tag. I want to hide the div with id focusDiv when user clicked outside of this div

caramba · Accepted Answer · 2017-02-15T12:26:32.067

Assuming outside is everywhere on the <body> except the mentioned element itself you could try like so:

$(document).on('click', 'body', function(event){
    if('focusDiv' === $(event.target).attr('id')) {
      return;
    }
  
    $('#focusDiv').hide();
});

#focusDiv {
  width:200px;
  height: 200px;
  border: solid 2px orange;
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="focusDiv">My Focus Div</div>

score 0 · Answer 2 · answered Feb 15 '17 at 12:12

0

Ok you should try this to hide div when click outside

$(document).mouseup(function (e)
{
    var container = $("#focusDiv");

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

answered Feb 15 '17 at 12:12

Pooja Roy

545
5
25

score 0 · Answer 3 · answered Feb 15 '17 at 12:33

Or you could check against $(e.target).parents('#focusDiv').length

$(document).on('click', function(e) {
  if (!$(e.target).parents('#focusDiv').length) {
    $('#focusDiv').hide();
  }
});

#focusDiv {
  border: 1px solid #000
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4 blockDiv" id="focusDiv">
  <div style="height:51px;padding:1em;background-color:white;" id="totalSel">Countries visited in last 6days?</div>
  <div style="background-color:white;" id="bg-div">
    <ul id="testMulti">
      <li>
        <span class="textinput" style="display:block;">
    <input type="text" id="countriesVisited">
    <label for="countriesVisited">Countries visited in last 6days?</label>
    <input type="hidden" id="countriesVisited-val" name="countriesVisited-val" value="">
    </span>
      </li>
      <li class="selected2 mulSel"><span class="mulSel1">Indonesia</span><span class="remove">x</span>
      </li>
    </ul>
  </div>
</div>

Hide a div when foucs is out or clicked outside div

3 Answers3