We Keep Coding

How to close the navigation bar by clicking outside?

I have a Drupal 8.6.8 site with Bootstrap 3.3.7 theme
I want my navigation menu to close when I click outside. I tried with the code :
(function ($) {
'use strict';
$(document).click(function (event) {
if (!$(event.target).closest('#navbar-collapse-first').length) {
$('.navbar-collapse-first').collapse('hide');
}
});
$(document).click(function (event) {
if (!$(event.target).closest('#navbar-collapse-second').length) {
$('.navbar-collapse-second').collapse('hide');
}
});
}(jQuery));
https://css-tricks.com/dangers-stopping-event-propagation/
It does not work, if I click outside the navigation menu, it does not This code only works if I delete the second one or leave the second one and delete the first one.
How to apply this on the 2 menu ?
UPDATE :
I found the answer :
(function ($) {
'use strict';
$(document).click(function (event) {
if (!$(event.target).closest('#navbar-collapse-first').length) {
$('.navbar-collapse-first').collapse('hide');
}
if (!$(event.target).closest('#navbar-collapse-second').length) {
$('.navbar-collapse-second').collapse('hide');
}
});
}(jQuery));

You can use This function
function OnwindowClick(elem , action){
$(document).on('click',function(e){
if (!$(elem).is(e.target) // if the target of the click isn't the container...
&& $(elem).has(e.target).length === 0) // ... nor a descendant of the container
{
action();
}
});
}
and use it like
// OnwindowClick(elem , action) add the prevent elements in `elem` something like this
OnwindowClick('#navbar-collapse-first , #navbar-collapse-second', function(){
$('.navbar-collapse-first, .navbar-collapse-second').collapse('hide');
});
Notes:
No need to use .closest() use the selector directly
elem are the elements to prevent the document click on it
Additional: You still need to add the buttons to the elem .. #navbar-collapse-first , #navbar-collapse-second , button1_Selector , button2_Selector
Example of how to use this function
$(document).ready(function(){
$('button.clickable').on('click' , function(){
$(this).text($(this).text() == 'Like' ? 'Dislike' : 'Like');
});
OnwindowClick('button.clickable' , function(){
$('button.clickable').fadeOut(400);
setTimeout(function(){
$('button.clickable').fadeIn(400);
} , 5000);
});
});
function OnwindowClick(elem , action){
$(document).on('click',function(e){
if (!$(elem).is(e.target) // if the target of the click isn't the container...
&& $(elem).has(e.target).length === 0) // ... nor a descendant of the container
{
action();
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="clickable">Like</button>

Have u tried this:
$(document).click(function (event) {
if (!$(event.target).closest('#navbar-collapse-second, #navbar-collapse-second').length) {
$('.navbar-collapse-second, .navbar-collapse-second').collapse('hide');
}
});

jQuery hide element when click in datepicker

I have a hidden div which will be shown on a button click and hide when i click every where else in page.
Now the problem is here:
Inside my div I have datepickers whenever I click on next/prev or select date,div slides up. How can I prevent that?
The code is here:
$(document).click(function(evt) {
if(evt.target.id!='btn' )
if($('#div').is(':visible')) {
$('#div').slideUp();
}
});
$("#div").click(function(e) {
e.stopPropagation();
return false;
});
$('#btn').click(function () {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
else{
//initialize controls
$('#div').slideDown();
}
});
Update:
jsfiddle added.

Please check my js fiddle
I have added date picker id #ui-datepicker-div" for stop propagation, and it's worked.
$(document).click(function(evt) {
if(evt.target.id!='btn' )
if($('#div').is(':visible')) {
$('#div').slideUp();
}
});
$( "#datepicker" ).datepicker();
$("#div, #ui-datepicker-div").click(function(e) {
e.stopPropagation();
return false;
});
$('#btn').click(function () {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
else{
//initialize controls
$('#div').slideDown();
}
});

you have to slideUp your required div if you click anywhere in your document body except your button 'btn', your div itself AND div children:
$(document).click(function(e) {
if ( e.target.id != 'btn' && e.target.id != 'div' && !$('#div').find(e.target).length) {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
}
});

In your document.ready you made mistake in if block, I modified it as
if(evt.target.id!='btn' ){
if($('#div').is(':visible')) {
$('#div').slideDown();
}
}
Also try to avoid using id as 'btn' as it this id or class will make confusion if you use more css in your design

Here is another version of the same problem. Use some common class for those elements that wouldn't hide your div. Hope it will help you:
HTML :
<html>
<body>
<div id="container" style="display:none">
<input type="date" class="prevent-click">
</div>
<button onclick="display()" class="prevent-click">click</button>
</body>
</html>
JS :
var display = function () {
$("#container").toggle();
$("body").off("click").on("click", function (event) {
if ($(event.target).hasClass("prevent-click")) {
return;
}
$("#container").hide();
});
}

Remove class after click outside the div

I know this is a old question , but i've searched a lot .
i want to remove class after clicked outside the like body . here is my code :
Html
<div id="user-login-top">Enter</div>
<div id="user-login-wrapper" class="">visible</div>
Jquery
$(function () {
$("#user-login-top").on("click", function () {
$("#user-login-wrapper").addClass("wide");
});
$(document).on("click", function (e) {
if ($(e.target).is("#user-login-wrapper") === false) {
$("#user-login-wrapper").removeClass("wide");
}
});
});
and here is the fiddle : Fiddle
Appreciate your help !?
Thx

It is because of the propagation of event.
When you click on user-login-top, the first click handle is triggered which is adding the class, then because of event propagation the handler attached to the document is triggered where it satisfies the if condition and removes the class.
One possible solution here is to use event.stopPropagation()
$(function() {
$("#user-login-top").on("click", function(e) {
$("#user-login-wrapper").addClass("wide");
e.stopPropagation()
});
$(document).on("click", function(e) {
if ($(e.target).is("#user-login-wrapper") === false) {
$("#user-login-wrapper").removeClass("wide");
}
});
});
#user-login-wrapper {
opacity: 0;
}
#user-login-wrapper.wide {
opacity: 1 !important;
}
<div id="user-login-top">ورود</div>
<div id="user-login-wrapper" class="">visible</div>
Another is
$(function() {
$("#user-login-top").on("click", function(e) {
$("#user-login-wrapper").toggleClass("wide");
});
$(document).on("click", function(e) {
if ($(e.target).is("#user-login-wrapper, #user-login-top") === false) {
$("#user-login-wrapper").removeClass("wide");
}
});
});
#user-login-wrapper {
opacity: 0;
}
#user-login-wrapper.wide {
opacity: 1 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="user-login-top">ورود</div>
<div id="user-login-wrapper" class="">visible</div>

<section>
<div class="click-text">
click inside and outside me
</div>
</section>
const concernedElement = document.querySelector(".click-text");
document.addEventListener("mousedown", (event) => {
if (concernedElement.contains(event.target)) {
console.log("Clicked Inside");
} else {
console.log("Clicked Outside / Elsewhere");
}
});

jQuery hide and show text input

I want to do a simple function in Jquery: when a button is clicked show the input text, when it's clicked again- hide the input text.
<div>
<div id="btnNewGroup">New Group</div>
<input type="text" id="newGroup" style="display:none" />
</div>
and this is the scrupt section:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").hide()) {
$("#newGroup").show();
}
else {
$("#newGroup").hide()
}
});
});
when I click the button the text input is showing, when I click it again I want the input text to be hidden, but nothing happens.

You can use toggle() to show / hide
Live Demo
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
The problem with the condition you have is that you are hiding the element instead of checking if it is hidden. You can is with :hidden like is(':hidden') to check if element is hidden.
if ($("#newGroup").is(':hidden')) {
$("#newGroup").show();
else
$("#newGroup").hide();

if ($("#newGroup").hide())
The hide function does not return a boolean value so you can't use it in an if statement. It returns a jQuery object which is always true so your second block never gets hit.
You can try two things:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").is(":visible")) {
$("#newGroup").hide();
}
else {
$("#newGroup").show()
}
});
});
Or a simple toggle:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
});
Additionally, when working with selectors multiple times it's a good idea to cache the element - otherwise jQuery tries to find the element each time you try:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
var $newGroup = $("#newGroup"); // Cache it here
if ($newGroup.is(":visible")) {
$newGroup.hide();
}
else {
$newGroup.show()
}
});
});

use .toggle() for hide and show alternatively in jquery
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});

Demo
Use .toggle() function
$("#btnNewGroup").click(function () {
$("#newGroup").toggle()
});
Or use :visible pseudo selector with is()
Demo
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").is(":visible")) {
$("#newGroup").hide();
}
else {
$("#newGroup").show()
}
});
});
Note :hide() function does not return boolean value. Use is(:visible) or is(:hidden)

You need to change
if ($("#newGroup").hide()) {
to (just one possible solution)
if ($("#newGroup").css('display')=='none') {
Because $("#newGroup").hide() will always return true.
And here are the full code:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").css('display')=='none') {
$("#newGroup").show();
}
else {
$("#newGroup").hide()
}
});
});

Have a look at the .toggle() function within the API.
http://api.jquery.com/toggle/

document.getElementById("username").style.display='block';

How do I hide a element using jquery on click and when a user clicks away?

CODE:
<script type="text/javascript">
$(document).ready(function() {
$('.show_or_hide_link_clicker').click(function() {
$(".the_box_to_show").fadeIn(400);
});
});
</script>
When show_or_hide_link_clicker is clicked the_box_to_show is shown. How do I hide it if show_or_hide_link_clicker is clicked again or when the user clicks away?
Update: This is what I am doing now: http://jsfiddle.net/nFbnr/
Question: How can i remove the double click requirement ot show the div?

jQuery Toggle is what you're looking for.
$('.the_box_to_show').toggle();

When clicking anywhere, check if the element was on the propagation path. If not, the user clicked outside of it so you can hide it.
$(document).click(function(e) {
if ($(e.target).closest(".the_box_to_show").size() === 0) {
$(".the_box_to_show").hide();
}
});
http://jsfiddle.net/vdHAu/

$(document).click(function(e) {
if (!$(e.target).is(".the_box_to_show")) {
$(".the_box_to_show").hide();
}
});
$('.show_or_hide_link_clicker').click(function() {
$(this).hide();
$(".the_box_to_show").fadeIn(400);
});

An another way without delegate event to document level:
you have to set attribute tabindex to the box and CSS outline for style
http://jsfiddle.net/GV56b/
$(document).ready(function () {
$('.show_or_hide_link_clicker').click(function () {
$(this).hide();
$(".the_box_to_show").fadeIn(400, function () {
this.focus()
});
});
$(".the_box_to_show").on('blur',function(){
$(this).hide();
$('.show_or_hide_link_clicker').fadeIn(400);
});
});

check this out
$('.show_or_hide_link_clicker').click(function() {
$(this).hide();
$(this).addClass('active);
$(".the_box_to_show").fadeIn(400);
});
$(document).on('click', 'html', function(){
$(".the_box_to_show").fadeOut(400);
});
$(document).on('click', '.active', function(e){
e.stopPropagation();
});