Develop Reference

How to fix other element reset to default when using jquery click function

I have an element with fixed sidebar with onclick function. When it is clicked at bottom page, the other element as content back to top of page. How I can stop this problem?
Here is my jquery function :
$(document).ready(function(){
$("#sidebarCollapse").on('click', function(e){
e.stopPropagation();
$('#sidebar').toggleClass('show-side-nav');
e.stopPropagation();
$('#user').toggleClass('d-none');
e.stopPropagation();
$('#navbar').toggleClass('show-side-nav');
});
Regards!

Guessing it's either a button which will reload the page, or <a href="#"> which will go to top. You need to use preventDefault(). You may not even need stopPropagation() in this instance, but if you do you only need it once. Also when you're toggling the same class on two elements, you can select them together.
$("#sidebarCollapse").on('click', function(e){
e.preventDefault();
e.stopPropagation();
$('#sidebar, #navbar').toggleClass('show-side-nav');
$('#user').toggleClass('d-none');
});

Jquery wouldn't hide an element

Done this a few times before, but something is wrong this time. Trying to create a popup. As you can guess, initially, it's hidden. It does show up on click, but when i try to close it, nothing happens. Also, when i try to change styles to display:none in developer tools, it switches back to display:block. Currently it's in the head section of the page, but i've tried placing it in the very bottom as well.
html of it
<div class="tablecell midlineunit popup-hml middle">
<div class="hml-popup-bg popupbg ">
<div class="hml-popup-cnt">
<div class="closepopup">X</div>
</div>
</div>
</div>
and js of it
$(".popup-hml").each(function(){
$(this).click(function(){
$(this).find(".hml-popup-bg").show();
});
});
$(".closepopup").each(function(){
$(this).click(function(){
$(this).parent().parent().hide();
});
});
and of course .hml-popup-bg is hidden in css

you can use this .. no need for .each() just use .click() and you can use .closest() instead of parent().parent();
$(".popup-hml").click(function(){
$(this).find(".hml-popup-bg").show();
});
$(".closepopup").click(function(e){
e.stopPropagation();
$(this).closest('.hml-popup-bg').hide();
});

This should work. Its because you close it, but dont stop propagation, so it gets opened again, through bubbling.
$(".popup-hml").each(function(){
$(this).click(function(){
$(this).find(".hml-popup-bg").show();
});
});
$(".closepopup").each(function(){
$(this).click(function(e){
e.stopPropagation();
$(this).parent().parent().hide();
});
});
https://jsfiddle.net/qcqacbyd/

Your usage of jQuery's .each() seems misplaced. What you really want to set up, I think, are 2 event listeners - one to open the popup when you click a button, another to close it when clicking the "X".
You might accomplish this with the following jQuery:
$(document).on("click", ".popup-hml", function(){
$(".hml-popup-bg").show();
});
$(document).on("click", ".closepopup", function(){
$('.hml-popup-bg').hide();
});

Hide div when the page is loaded and show when link is clicked

I took this simple code for drop down menu and it's working so far. The problem is that when I load the page, #drop menu is displayed, which is obviously not what we want. The goal is to show the #drop menu when #submenu link is clicked, not immediately.
I modified my code below, because I need a div element, not a list.
js
$(document).ready( function(){
$('#submenu').click( function(event){
event.stopPropagation();
$('#drop').toggle();
});
$(document).click( function(){
$('#drop').hide();
});
});
html
Products
<div id = "drop" >
DROP DOWN MENU
</div>

Add some css:
#drop { display: none; }

just put this code in your dropdown.
Products
<div id = "drop" style="display:none;">
DROP DOWN MENU
</div>
and your problem will be resolved when page load drop div will be hidden that u can use toggle or show command in jquery function.
Regards
Imran Qasim

Since you don't want your element to be displaced when the page first loads, why not set its visibilty to hidden in the html, like style="visbility:hidden",and assign submenu link an action listener function and reference this element via getElementById and set its visibility to visible.
document.getElementbyId("dropDownMenu").style.visibility = "visible"

If you dont't want to use css then you can do it with jquery.
Products
<div id = "drop" >
DROP DOWN MENU
</div>
<scitpt type="text/javascipt">
$(document).ready( function(){
$('#drop').hide();
$('#submenu').click( function(event){
event.stopPropagation();
$('#drop').toggle();
});
$(document).click( function(){
$('#drop').hide();
});
})
</script>
Fiddle

Close a Dropdown menu when you click somewhere in the page with jQuery? [duplicate]

This question already has answers here:
jQuery drop down menu closing by clicking outside
(7 answers)
Closed 8 years ago.
I have a simple Dropdown menu that I am showing on inline text links. I am using jQuery click event to show the Dropdown menu when a link is clicked on.
What I would like to do is have the Dropdown menu go back to a hidden state when a click anywhere is made. Right now you have to click the link again to close the menu.
Demo http://codepen.io/jasondavis/pen/sFpwK?editors=101
jQuery
// Show Dropdown Menu when link is clicked
$(function(){
$(".inline-dropdown-menu").click(function(e){
$(this).find(".inline-dropdown-menu-list:first").toggle();
e.preventDefault(); // Stop navigation
});
});
HTML
<span class="inline-dropdown-menu">
My Link that reveals a DropDown Menu when clicked on<span class="caret"></span>
<ul class="inline-dropdown-menu-list">
<li class="bottomBorder">
alphabetically
</li>
<li>
2. the first report, alphabetically
</li>
<li>
3. the first report, alphabetically
</li>
</ul>
</span>

http://codepen.io/anon/pen/JmLsB
$(function () {
$(".inline-dropdown-menu").click(function (e) {
$(".inline-dropdown-menu-list").hide(); // to hide other drop down
$(this).find(".inline-dropdown-menu-list:first").toggle();
e.preventDefault(); // Stop navigation
});
});
// to hide drop down if you click other than inline-dropdown-menu class
$(document).click(function (e) {
var container = $(".inline-dropdown-menu");
if (!container.is(e.target) && container.has(e.target).length === 0) {
$(".inline-dropdown-menu-list").hide();
}
});

This might be useful:
var flag = false;
$(".inline-dropdown-menu").click(function(e){
$(".inline-dropdown-menu-list").not(':hidden').hide();
$(this).find(".inline-dropdown-menu-list:first").toggle();
e.preventDefault(); // Stop navigation
flag = true;
});
$('body').click(function(){
if (flag) {
flag = false;
return;
}
$(".inline-dropdown-menu-list").not(':hidden').hide();
});

try this
$(function(){
$(".inline-dropdown-menu").click(function(e){
e.stopPropagation();
$(this).find(".inline-dropdown-menu-list:first").toggle();
e.preventDefault(); // Stop navigation
});
$("body").click(function(e){
$(".inline-dropdown-menu-list").hide();
});
});

When your link is clicked, you will have to add a click event to body. When body is clicked, you can hide your dropdown, and also remove the event on body again. I used an setTimeout to prevent double click. I also add a namespace to the click event on body (click.ddls), so you can have other click events.
So check this demo out: http://jsfiddle.net/gdxyef46/2/
// Show Dropdown Menu when link is clicked
$(function(){
$(".inline-dropdown-menu a").click(function(e){
e.preventDefault(); // Stop navigation
$("body").off("click.ddls");
$(".inline-dropdown-menu-list").toggle();
//to prevent double click
setTimeout(function(){
$("body").on("click.ddls", function(){
console.log("body clicked");
$(".inline-dropdown-menu-list").hide();
$("body").off("click.ddls");
});
}, 300);
});
});

without unique class names, you could loop through them and check if they are visible and if so , close it. This code isn't working (apologies), but will hopefully point you in the right direction. I personally like to use on("click") vs click() in case you are dealing with dynamic elements that the DOM doesn't have access to yet.
$('*').not(".inline-dropdown-menu").on("click", function(){
$('.inline-dropdown-menu-list').each(function() {
if ($(this).is(":visible")) {
$(this).toggle();
}
});
You could also create a counter based on $('.inline-dropdown-menu-list').length and assign a data-id to each so you can match and keep track of them. Hope this helps.

If I understand you correctly you want to to replicate what the drop down arrow is doing, when you click on the body. If that is so, then try this:
$("body").click(function(e){
$('.inline-dropdown-menu.open ').find('.inline-dropdown-menu-list:first').toggle();
});
link to demo.
But do note that if you click the body again it will again show the drop down. You can play around to remove that if you don't want that.

Hide div on blur

I have a jQuery function where when an element is clicked a hidden div shows.
$('.openHide').click(function(){
$(this).next('.hiddenContent').toggle();
});
I need to modify it s that I could close this div if I click back not just on the first element. Possibly on Blur, but I am not sure how to indicate the element...
$('.hiddenContent').blur(function() {
$('.hiddenContent').parent().children('.hiddenContent').hide();
});
Here's my HTML:
<span class="openHide">text here</span>
<div style="display:none" class="hiddenContent">
hidden content here
</div>

On the click on the span the div should be toggled
On the body click the div should be hidden
On the click on the div, the event should not be propagated to the body
On the click on the span the event should not be propagated to the body
$(document).ready(function() {
$('.openHide').click(function(e) {
$('.hiddenContent').toggle();
e.stopPropagation();
});
$(document.body).click(function() {
$('.hiddenContent').hide();
});
$('.hiddenContent').click(function(e) {
e.stopPropagation();
});
});

If .hiddenContent is a div you won't be able to use blur, that only works on text inputs. mouseout may be an alternative, and $(this) is what I think you are looking for in this case:
$('.hiddenContent').mouseout(function() {
$(this).hide();
});
Hide on clicking elsewhere
If you want to hide the div when you click outside the element you must watch for clicks all over the body of the page:
$('body').click(function() {
// Hide all hidden content
$('.hiddenContent').hide();
});
And then provide and exception for when you are clicking on the actually hidden content itself, and when you want to open it:
$('.hiddenContent').click(function(e) { e.stopPropagation() });
$('.openHide').click(function(e) {
$(this).next('.hiddenContent').toggle();
// this stops the event from then being caught by the body click binding
e.stopPropagation();
});