Hide Search box when click anywhere except itself

Question

I'm new to Jquery and have a little problem with the Jquery function. I got the code from somewhere and would like to add a little function like click anywhere except the search box will hide the search box. Currently, the search box only hide when I click on img close.png :(

here's the code

<script>
$(document).ready(function() {

// Search
$('ul.tert-nav li.searchit').click(function() {
    $(this).addClass('search');
    $('.searchbox').fadeIn();
    $('ul.tert-nav li img.searchicon').hide();
});



$('ul.tert-nav li.searchit img.closesearch').click(function(e) {
    e.stopPropagation();
    $('.searchbox').hide();
    $('ul.tert-nav li').removeClass('search');
});

})
</script>

HTML Code:

<ul class="tert-nav">
    <li><img alt="" border="0" src="images/icon-cart.png" width="16" height="16" /></li>
    <li><img alt="" border="0" src="images/icon-tickets.png" width="16" height="16" /></li>
    <li class="searchit">
        <img alt="" border="0" class="searchicon" src="images/icon-search.png" width="16" height="16" />
        <div class="searchbox">
            <img alt="" border="0" class="closesearch" src="images/icon-close.png" width="16" height="16" />
            <input placeholder="search..." type="text" />
            <input type="submit" value="" />
        </div>
    </li>
</ul>

The CSS:

@charset "utf-8";
/* CSS Document */

ul.tert-nav {
    float: right;
    position: absolute;
    margin: 0;
    padding: 0;
    right: 0;
    top: 0;
    list-style: none;
}

ul.tert-nav li {
    float: right;
    width: 26px;
    height: 28px;
    background: #3c3c3c;
    text-align: center;
    margin-left: 2px;
    cursor: pointer;
    transition: all .2s ease;
    -o-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -webkit-transition: all .2s ease;
}

ul.tert-nav li:hover {
    background: #000;
}

ul.tert-nav .search {
    width: 246px;
    text-align: left;
    cursor: default;
}

ul.tert-nav .search:hover {
    background: #3c3c3c;
}

ul.tert-nav .searchbox {
    display: none;
    width: 100%;
}

ul.tert-nav .searchbox .closesearch {
    float: left;
    margin: 6px 4px 0px 4px;
    cursor: pointer;
}

ul.tert-nav .searchbox .closesearch:hover {
    opacity: 0.8;   
}

ul.tert-nav .searchbox input[type=text] {
    float: left;
    width: 184px;
    height: 24px;
    padding: 0px 0px 0px 10px;
    margin: 2px 0px 0px 0px;
    border: none;
    background: url(images/search-bg.png) no-repeat;
    outline: none;
}

ul.tert-nav .searchbox input[type=submit] {
    float: left;
    width: 26px;
    height: 24px;
    margin: 2px 0px 0px 0px;
    padding: 0px;
    border: none;
    background: url(images/search-btn.png) no-repeat;
    outline: none;
    cursor: pointer;
}

please see [this question](http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it?rq=1). — Eddy, Jul 06 '15 at 09:28
Thank you Eddy, but can you help me to update my Jquery code. I Don't understand after read that :( — Joe, Jul 06 '15 at 09:34
please check code is working now ...if it works for you please do accept answer also — Pranay Rana, Jul 06 '15 at 12:54

Pranay Rana · Answer 1 · 2015-07-06T12:54:06.077

2

Updates

JSFiddler working Demo

As you are checking for div element and serchbox is child of div here is code that will work for you

    $(document).bind('click', function(e){
     var par = $(e.target).parent();
    if(!$('.searchbox').is(e.target))
    {
       if( typeof par != 'undefined' && par.attr('class')=='searchbox')
        return;
            $('.searchbox').hide();

    };    
   });

you can do like this

$(document).on("click", function(e){
    if( !$(".searchbox").is(e.target) ){ 
        $(".searchbox").hide();
    }
});

edited Jul 06 '15 at 12:54

answered Jul 06 '15 at 09:30

Pranay Rana

175,020
35
237
263

@joe try to compare id of element with the clicked element id might make some difference – Pranay Rana Jul 06 '15 at 09:42
@Joe - can you put your code in jsfiddle ..so i can get more idea about it – Pranay Rana Jul 06 '15 at 09:43
@Joe - i ma not able to verify as it just showing some black boxes – Pranay Rana Jul 06 '15 at 12:25
just click the first box and the search box will appear. then click the very left box (icon x) to close it. All I want is when I click somewhere except the search box, it will hide or disappear – Joe Jul 06 '15 at 12:33
@Joe - it should ont work because you appling class on div element not on texbox which leads to wrong result – Pranay Rana Jul 06 '15 at 12:41
so what should I do Pranay, help me fix it :( – Joe Jul 06 '15 at 12:43
@Joe - please check code is working now ...if it works for you please do accept answer also – Pranay Rana Jul 06 '15 at 12:54
Not worked like I want. but Thank you Pranay for your help – Joe Jul 06 '15 at 13:04

score 1 · Answer 2 · answered Jul 06 '15 at 09:36

1

You can do:

$(document).click(function (e) {
  if($(".searchbox").is(":visible") && !$(".searchbox").is(e.target)) {
      $(".searchbox").fadeOut();
  }
});

answered Jul 06 '15 at 09:36

Powkachu

2,170
2
26
36

Hide Search box when click anywhere except itself

2 Answers2