javascripthtml

Make Search Box closes if user clicks anywhere?


Currently, the search box opens and closes on clicking the font awesome search icon. But I want the search box closed when the user clicks anywhere inside the body...

My Code:

button.search-open {
    position: absolute;
    z-index: 999;
    background-color: transparent;
    border: none;
    padding: 8px 20px;
    font-size: 20px;
    color: #fff;
    top: 10px;
    margin-left: 1225px;
    border-radius: 4px;
    cursor: pointer;
}

     <button class="search-open">
       <i class="fa fa-search" aria-hidden="true"></i>
       <i class="fa fa-times" aria-hidden="true"></i>
     </button>
    <div class="search-box">
       <form action="<?php echo home_url( '/' ); ?>">
         <h3>Type Here To Search</h3>
           <label>
            <input type="text" name="s" placeholder="Search...">
            <button type="submit" class="submit-btn"><i class="fa fa-searchs" aria-hidden="true"></i></button>
             </label>
          </form>
         </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
        $(".search-open").click(function() {
            $('.search-box').toggle();
            $('.search-open .fa-search, .search-open .fa-times').toggle();
        });
  });
</script>

Thanks in advance :)


Solution

  • Maybe you can try something like this. Let me know

    $(document).ready(function() {
     $('.search-open').click(function(){
        $('.search-box').toggle();
         $('.search-open .fa-search, .fa-times').toggle();
        
    });
    });
    
    $(document).click(function(event) {
      var $target = $(event.target);
      if(!$target.closest('#search').length &&
      $('.search-box').is(":visible")) {
        $('.search-box').slideToggle();
      }
    });
    .search-box {display:none}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div  id="search">
    <button class="search-open">
           <i class="fa fa-search" aria-hidden="true"></i>
           <i class="fa fa-times" aria-hidden="true"></i>
         
    </button>
        <div id="search-box" class="search-box" >
           <form action="<?php echo home_url( '/' ); ?>">
             <h3>Type Here To Search</h3>
               <label>
                <input type="text" name="s" placeholder="Search...">
                <button type="submit" class="submit-btn"><i class="fa fa-searchs" aria-hidden="true"></i></button>
                 </label>
              </form>
             </div>
    </div>