I am making a search input on focus it shows a div with options with following:
$("#search").focus(function(){
$("#options").fadeIn("fast");
});
I am hiding the div back with this function
$("#search").blur(function(){
$("#options").fadeOut("fast");
});
now the problem is even when user clicks at any checkbox in #option
it hides. How I can stop it hidding when clicking checkboxes?
We hide the divs by adding a CSS class called hidden to the outer div called . text_container . This will trigger CSS to hide the inner div.
Select the div element. Use delay function (setTimeOut(), delay()) to provide the delay to hide() the div element.
To hide an element when clicked outside: Add a click event listener to the document object. On each click, check if the clicked element is outside of the specific element using the contains() method. If the clicked element is outside, hide the original element.
$("#search").blur(function(e){
e.stopPropagation()
$("#options").fadeOut("fast");
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With