How to close a div by clicking outside anywhere?

Question

I am working on alpha.dubaiexporters.com.

http://alpha.dubaiexporters.com/aboutus.aspx

There is a go button clicking on which a search panel appears where I can perform search keyword and category.

The issue is that after clicking on go button, search panel appears but if the user does not want to perform any search, he clicks outside anywhere but that search panel does not go.

I tried the following code where I have written javascript code but it didn't work.

<header class="header vc_row-fluid vc_col-sm-12">
<div class="top-header vc_col-sm-12">
<div class="logo shadows vc_col-sm-3">
<a href="Default.aspx"><img src="images/layout/check1.png" width="230" height="69" alt="Dubai Exporters" /></a></div>
<div class="menu-btn icon-menu-1"></div>

<div class="header_search"><div class="search sb-search" id="sb-search">
    <div class="gray-form">
<input type="text" name="s" class="footer_search_input" onclick="clearInput(this, 'Search');" value="Search" />
<input type="submit" name="search" class="btn btn-primary sb-search-submit" value="Search" />
        <span class="sb-icon-search">GO</span>
        </div>

</div></div>
<div class="header-search-body">
<div class="header-search-container">
<div class="header-search-form">
<div class="header-form-container" id="mydiv">
<div class="header-input-container"><span class="header-input-title">Keyword:</span>
     <input type="text" id="txtkeyword" name="s" runat="server" autocomplete="off">
    <div class="clearfix"></div></div>


    <div class="header-input-container"><span class="header-input-title">Category:</span>
    <input type="text" id="txtserach" list="browsers" name="myBrowser" runat="server" autocomplete="off" causesvalidation="false">
     <datalist id="browsers">
  <option value="Automotive"/>
  <option value="Building and Interiors"/>
  <option value="Food, Kitchen and Hotel Supplies"/>
  <option value="Industrial and Machinery"/>
  <option value="Consumer and Household"/>
  <option value="Medical and Healthcare"/>
                     <option value="Printing , Packaging and Plastic"/>
                     <option value="IT / Telecom / Electronics"/>
                     <option value="Oil and Gas"/>
                     <option value="Power and Energy"/>
</datalist>




<div class="clearfix"></div></div>




<input type="hidden" id="header-post-type" value="gd_place">
        <asp:Button ID="Search" class="wpb_button wpb_btn-warning icon-search" style="top:0px;width:70px;height:70px;" Text="Search" runat="server" onclick="doit" OnClientClick="return checkLength();" UseSubmitBehaviour="false" CausesValidation="false" />
    <script type="text/javascript">
       function checkLength() {
           var textbox = document.getElementById('<%=txtkeyword.ClientID%>');
           var textbox1 = document.getElementById('<%=txtserach.ClientID%>');
           if (textbox.value.length < 3 && textbox1.value.length == 0) {
                alert("The entered input should be 3 or more than 3 characters");
                return false;
            }
        }
    </script>
    <script type="text/javascript">
        //window.onload = function () {
        //    var hideMe = document.getElementById('mydiv');
        //    document.onclick = function (e) {
        //        if (e.target.id !== 'mydiv') {
        //           // mydiv.style.display = 'none';
        //        }
        //    };
        //};

        $(function () {
            $("[id*=Search]").click(function (e) {
                $("[id*=mydiv]").attr('style', 'display:block');
            });

            $(document).click(function (e) {
                if (!$(e.target).is('[id*=Search]')) {
                    $("[id*=mydiv]").attr('style', 'display:none');
                }
            });
        });
    </script>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<a href="http://cohhe.com/demo/sky/sky-directory/gd-login/" class="header-add-property wpb_button wpb_btn-primary wpb_regularsize">Add Your Listing</a>

<div class="top-menu-container ">
<div class="menu-style"><ul id="menu-menu-2" class="header-menu gd-menu-z">
    <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-1759"><a href="Default.aspx">Home</a></li>
        <%--<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1767"><a href="advertize.aspx">Advertise</a></li>--%>

<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1760"><a href="exhibition.aspx">Exhibitions</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1764"><a href="dubaiexhibitions.aspx">Trade Fairs in U.A.E</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1761"><a href="exhibition.aspx">Trade Fairs Worldwide</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1762"><a href="addexhibition.aspx">Add Your Event</a></li>
<%--<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1765"><a href="http://cohhe.com/demo/sky/sky-directory/right-sidebar/">Right sidebar</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1763"><a href="http://cohhe.com/demo/sky/sky-directory/left-sidebar/">Left sidebar</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1766"><a href="http://cohhe.com/demo/sky/sky-directory/typography-2/">Typography</a></li>--%>
</ul>
</li>
<%--<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1767"><a href="http://cohhe.com/demo/sky/sky-directory/blog/">Subscribe</a></li>--%>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1768"><a href="member_benefits.aspx">Memberships</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1768"><a href="aboutus.aspx">About us</a></li>
    <%--<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1768"><a href="http://cohhe.com/demo/sky/sky-directory/contact/">Contact</a></li>--%>
</ul></div> </div>




<div class="clearfix"></div>
</div>
<%--<div class="header-background-img"><img src="//cohhe.com/demo/sky/sky-directory/wp-content/uploads/2015/01/header_bg1.jpg" alt="Header bg" /></div>--%>
    <div class="header-search-container">
<div id="main_header_bg">
<style type="text/css" media="all">#main_header_image { background: url('images/header02.jpg'); height:150px; background-size: cover !important; background-position: 100% !important; }</style> 

</div>
<div id="main_header_image"></div>


</div>
</header>

Answer 1

You can achieve with the class names.

$(document).click(function (e) {
   if(e.target != $(".sb-icon-search")[0]  && (e.target.parentElement.parentElement != $(".header-form-container")[0])){
       $(".header-search-body")[0].style.display = 'none';
     }
});

$(".header_search").click(function (e) {
     $(".header-search-body")[0].style.display = 'block';
});

it will be more easy way, if you use id instead of class names

Answer 2

First remove/rename class 'header-search-container' that you have used for header background (its used twice). Then add event listeners or conditions on txtkeyword, textsearch and Search button. Example:

 // this will hide the search div
    $(document).click(function (e) {
                var id = e.target.id;
                if(id !== 'ctl00_Search' && id !== 'ctl00_txtkeyword' && id !== 'ctl00_txtserach') {
                      $('.header-search-container')[0].style['display']='none';
                }
            });