how to hide div when click outside using jquery?

Today, We want to share with you hide div when click outside using jquery.In this post we will show you jquery hides div on click anywhere, hear for how to hides div when click outside using javascript we will give you demo and example for implement.In this post, we will learn about onclick show hides div jquery demo with an example.

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

hide div when click outside using jquery
How to hide div when clicking outside

$(document).mouseup(function (e){

	var data_content = $("#YOUR_MAIN_DIV_TARGETED_ELEMENT_ID");

	if (!data_content.is(e.target) && data_content.has(e.target).length === 0){

		data_content.fadeOut();
		
	}
}); 

jquery hide div on click outside

if clicked outside of div jquery

$(document).mouseup(function(e) 
{
    var data_content = $("YOUR MAIN DIV CONTAINER SELECTOR");

    // if the target of the click isn't the data_content nor a descendant of the data_content
    if (!data_content.is(e.target) && data_content.has(e.target).length === 0) 
    {
        data_content.hide();
    }
});

outer click on div hide div in jqeury

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

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

I hope you get an idea about Close div if click outside.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.