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