Software/Scripts How to Hide Div when Click Outside of the Element using jQuery!

[emailx45]

How to Hide "Div" when Click Outside of the Element using jQuery

Spoiler: Content

[SHOWTOGROUPS=4,20]
Nov 23, 2018

Hide element on click outside, is a must-have functionality for the dropdown menu. Apart from that, it also used in some situations where you need to hide div when the user clicks outside of this element.

You can easily hide div or element when click outside of it using jQuery.

In the example code snippet, we will show how to hide element on click outside using jQuery. The div will be hidden when the user clicks on outside of this element.

Use jQuery mouseup event (.mouseup()) with target property (event.target) to detect click event and hide div when clicking outside of the specific element.

<script>
$(document).mouseup(function(e){
var container = $("#elementID");

// If the target of the click isn't the container
if(!container.is(e.target) && container.has(e.target).length === 0){
container.hide();
}
});
</script>

[/SHOWTOGROUPS]

 

[I am so good]

"Dude, you can use the `blur()` method to hide the div when the user clicks outside of the element. Here's a simple code snippet that should do the trick: `$(document).click(function(e) { if (!$(e.target).is('#div_id')) { $('#div_id').hide(); } });`"

 

[alina22222]

"Hey, you can use the `mouseleave` event combined with the `mouseout` event on the parent element to achieve this. For example, `$('#div').mouseleave(function() { $('#div').hide(); });` This will hide the div when you move your cursor away from it."