Develop Reference

Menu not toggling(closing) on click

I have a menu which has to be toggled (open and closed). Also if one dropdown is open, and the user clicks on some other dropdown then, in this case, the opened one has to close. In the code which I have written, I am able to achieve the scenario of closing the dropdown if the user clicks on the next. But the dropdown does not toggle when clicked on the link. It only opens. But it has to also close when the same link is clicked.
Js code.
$('.header-nav-menu .header-menu a.menu-item').click(function(e) {
e.preventDefault();
$('.header-nav-menu .header-menu ').removeClass('show-menu-dropdown');
if ($(this).closest('.header-menu').hasClass('show-menu-dropdown')) {
$(this).closest('.header-menu').removeClass('show-menu-dropdown');
} else {
$(this).closest('.header-menu').addClass('show-menu-dropdown');
}
});
HTML code
<div class="header-menu third-level">
Who We Are
<li class="no-submenu">
<div class="menu-item">
Our Brand
</div>
</li>
</div>

You can try a boolean variable to save whether or not the class is present before removing it from all the menus. Something like this:
$('.header-nav-menu .header-menu a.menu-item').click(function(e){
e.preventDefault();
var hasClass = $(this).closest('.header-menu').hasClass('show-menu-dropdown');
$('.header-nav-menu .header-menu ').removeClass('show-menu-dropdown');
if (hasClass){
$(this).closest('.header-menu').removeClass('show-menu-dropdown')
}else{
$(this).closest('.header-menu').addClass('show-menu-dropdown')
}
})

Javascript closing a dropdown with document.onclick

I have a dropdown dropdown using ul and li:
<img class="options_toggle" src="assets/down_arrow.png"onclick="toggle_display('options');"/>
<ul id="options" class="options_content hide">
<li>
option one
</li>
</ul>
the options_toggle function swaps back and forth between the "hide" and "show" class in the options ul. Now I want to only hide it when the user clicks anywhere except the options toggle:
$(document).ready(function () {
document.onclick = function(e) {
// prevent the dropdown from closing instantly when you click the toggle to open it
$(".options_toggle").click(function (e) {
e.stopPropagation();
});
// hide the dropdown
$(".options_content").removeClass("show");
$(".options_content").addClass("hide");
};
});
But the problem is that the first time they load the page they have to click somewhere once before clicking the toggle. After the first click it works fine, they just have to click twice at first which can be annoying.
Any ideas what it's doing and why it cancels or ignores the first toggle? Thanks.

It's usually wrong to add an event handler inside another event handler. Just bind your $(".options_toggle").click() handler at top-level.
$(document).ready(function() {
$(".options_toggle").click(function(e) {
// prevent the dropdown from closing instantly when you click the toggle to open it
e.stopPropagation();
});
$(document).click(function(e) {
// hide the dropdown
$(".options_content").removeClass("show");
$(".options_content").addClass("hide");
});
});

Clicking on an empty anchor link sends the user to the top of the page

I have two empty anchor links <a href="#"> that are used to create tabs. Please take a look at my jsFiddle:
https://jsfiddle.net/MrSnrub/cuuy5cbp/
The problem is that the user goes to the very top of the page when going from tab to tab. I would use jQuery-UI's tabs, but I have the same HTML element for each tab, and think jQuery-UI's tabs force you to have different HTML elements in each tab.
I want to use these tabs further down my page, and making the user scroll down after every tab switch is not user-friendly. How do I fix this?
UPDATE: If I click on "Tab 1" to activate it, I shouldn't be able to hit the Tab key on my keyboard and Tab 2 is now highlighted.

Use <a href="javascript:void(0)">.
https://jsfiddle.net/obybyvds/
Here's an explanation of why that works

You can use href="#/". It should prevent this behavior from happening.

You could set the href to javascript:;
Tab 1
Or keep the href="#" and simply event.preventDefault() on click using this JavaScript:
[].forEach.call(document.querySelectorAll("[href='#']"), function(el) {
el.addEventListener("click", function(e){
e.preventDefault();
}, false);
});
jsFiddle
or in jQuery:
$(document).on("click", "[href='#']", function(e) {
e.preventDefault();
});

How to submit active tab's form?

My question: How do I auto-submit my ACTIVE tab's form using jquery/javascript?
I'm using bootstrap.
Tabs example :
<ul class="nav nav-pills-homepage" id="tabsMenuID">
<li role="presentation" class="active">content1</li>
<li role="presentation">content2</li>
</ul>
In every tab I have a form to submit.
JS file :
function autoSubmit(){
setTimeout(function(){
$('getActivetabHere').(GETactiveTab'sSubmitButton).trigger('click');
},597000);
}
If there's an easier way to submit, I wouldn't like to trigger form's submit button.
Thanks in advance.

I do not think you need to look up the tab, the form should be visible (unless for some reason you hide it on the active tab)
$('form:visible').submit();

You can get the id of active tab, then using that find out the form and trigger the submit event
var tab=$('#tabsMenuID li.active a').attr('href');
$(tab).find('form').submit();

Use jQuery to find the tab that is active and submit the containing form
$('a[data-toggle=tab]').each(function(){
if(($this).parent().hasClass('active')){
($this).find('form').submit();
}
});

Javascript and a href

Let's suppose that I have the following dropdown after the last div, a dropdown menu appears once he clicks.
<div id="test"> Arrow </div>
I want the user to be able to click on this element and the dropdown appear but also if he mid clicks to be able to open this link directly in a new tab. In other words I want to prevent the default action onclick but still show the link of the element on hover or whatever.
Thank you

you can do
<div id="test"> Arrow </div>

with jquery 1.7+
$('#test a').on('click', function (e) {
if (e.which < 2) { // left mouse button
e.preventDefault();
// and code to show dropdown
}
});