Mehmet Mehmet - 1 month ago 8
HTML Question

How to make div disappear when clicking outside?

Here is the CSS & HTML for Wordpress

<style>
.fixedmenu {
background: url('https://cdn2.iconfinder.com/data/icons/mixed-rounded-flat-icon/512/magnifier_glass-48.png');
background-repeat: no-repeat;
width: 43px;
height: 43px;
position: fixed;
right: 0px;
top: 160px;
z-index: 1000;
}

.fixedmenu1 {
background-color: #62bdb2;
background-repeat: no-repeat;
width: 250px;
height: 100px;
position: fixed;
right: 0px;
top: 160px;
z-index: 1100;
border-radius: 10px 0px 0px 10px;
}

.fixedmenu_1 {
margin: 0px 0 0 43px;
}
</style>
<div class='fixedmenu' onClick='this.className=&apos;fixedmenu1&apos;'>
<div class='fixedmenu_1'>
<?php get_search_form(); ?>
</div>
</div>


I'd like to make Wordpress search box disappear when outside of the div is clicked. How can I do this?

Answer

Using jquery you could do a little something like this. Click the red part of the box and the inner div will disappear.

fiddle: https://jsfiddle.net/xzc36bvc/2/

<div class='fixedmenu'>
  <div class='fixedmenu_1'></div>
</div>

$('.fixedmenu').on('click', function() {
    $('.fixedmenu_1').fadeOut(500);
})