Make Search Box closes if user clicks anywhere?

Question

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 :)

Have you try to add `$(document).click` or `$(document).on('click','body *',...`? — Itagaki Fumihiko, Jul 30 '22 at 00:09

Crystal · Accepted Answer · 2022-07-31T03:55:35.580

0

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>

edited Jul 31 '22 at 03:55

answered Jul 30 '22 at 04:04

Crystal

1,845
2
4
16

@El3magic you can just remove the word "Search inside your button". See above code and let me know. – Crystal Jul 30 '22 at 04:59
@El3magic I would suggest you recreate your navigation and put your search so it is part of it. base on the url you prvided. – Crystal Jul 30 '22 at 05:50
There is a problem in the code, when I click on the search box it closes as well so no chance to type anything, how I can fix this problem? – El3magic Jul 30 '22 at 20:55
@El3magic I edited this hopefully the above code works for you now. Let me know – Crystal Jul 31 '22 at 03:56

Make Search Box closes if user clicks anywhere?

1 Answers1