Develop Reference

why every time I click my tabs the page is scrolling up a little?

below is my jQuery, why every time I click my tabs the page is scrolling up a little?
I think the jQuery has the problem...
<script>
//jQuery for the loan calculator tab
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
</script>
I tried added this snippet to check whether the e.preventDefault() works
e.preventDefault();
alert("Was preventDefault() called: " + event.isDefaultPrevented());
but the alert box doesn't show up.

e.preventDefault(); on li click event does not disable triggering of anchor element. add code below to disable it.
jQuery('.tabs .tab-links li a').on('click', function(e) {
e.preventDefault();
});

this is a simple solution with data attribute.
see this: https://codepen.io/nisaifudeen/pen/MPJppr
Jquery
$('.wrapper ul li').find(' a').click(function(e){
e.preventDefault();
var dataShow = $(this).parent().find('.heading-c').data('show');
$('.heading-c[data-show=' + dataShow + ']').toggleClass('active');
});

Bootstrap dropdown submenu closing upstream submenu

I have a two-level dropdown that's working great, but when I add another level, the JS seems to be removing the open class from the previous submenu, which means that the desired third-level menu can't be seen, even though it does get the open class added.
I've tracked it down to this JS:
$(function() {
$('li.dropdown-submenu').on('click', function(event) {
event.stopPropagation();
if ($(this).hasClass('open')){
$(this).removeClass('open');
} else {
$('li.dropdown-submenu').removeClass('open');
$(this).addClass('open');
}
});
});
This is, I think, doing the undesired closing of the previous submenu. The HTML is very similar to this example.
Using an adaptation of the JS from that example, I get the third level, but then any given open submenu doesn't automatically close when clicking another submenu.
$(document).ready(function(){
$('.dropdown-submenu a').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
Need the best of both here!

I think you almost had it, you just needed to look for the different clicks.
The approach I took below was to handle all a clicks but then check to see if it had a class of test which then followed your code verbatim or else, if it didn't have a class of test it then hides all the submenus and goes to it's default href.
<script>
$(document).ready(function(){
$('.dropdown-submenu a').on("click", function(e){
if ($(this).hasClass('test')) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
} else {
$('.dropdown-submenu ul').hide();
}
});
});
</script>
Your updated working example: https://www.w3schools.com/code/tryit.asp?filename=FUB7ECWP20DA

Maybe this is what are you looking for.
This code to close submenu when clicking another submenu.
Javascript
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
/* This is to hide all dropdown-menu children if the parent(dropdown-submenu) in the element have been clicked */
$(this).next('ul').find('.dropdown-menu').each(function(){
$(this).hide();
});
/* This is to find another dropdown-menu have has been opened and hide its submenu */
var xw = $(this);
$(this).closest(".dropdown-menu").find('.dropdown-submenu a.test').not(xw).each(function(){
if($(this).next("ul").is(":visible")){
$(this).next("ul").hide();
}
});
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
And JSFiddle example : https://jsfiddle.net/synz/vasho634/

I hope this is what you want. Here is the Solution, Not Full Proof but upto that extent whre you want
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
siblingUl = $(this).parent().siblings("li.dropdown-submenu").children("ul").css("display");
if(siblingUl == "block"){
$(this).parent().siblings("li.dropdown-submenu").children("ul").toggle();
}
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});

adding tab dropdown on slide up and down div on click

This drop down div is view after click packages and i want to add when select choose your destination change the icon set. i tried but when click drop down item on list main div slide up...
my jquery code is below
//SLIDE UP AND DOWN FUNCTION
$('li.dropdown-packages a').on('click', function(e){
e.preventDefault();
e.stopPropagation();
var $packages = $('.custom-packages');
if($packages.is(":visible")){
$packages.slideUp(350);
setTimeout(function () {
$('li.dropdown-packages').removeClass('dwn-arrow');
}, 800);
}
if($packages.is(":hidden")){
$packages.slideDown(350);
setTimeout(function () {
$('li.dropdown-packages').addClass('dwn-arrow');
},800);
}
});

Use the slideToggle() method.
$('li.dropdown-packages a').on('click', function(e){
e.preventDefault();
e.stopPropagation();
var $packages = $('.custom-packages');
$packages.slideToggle();
});

Hide DIV after click (jQuery)

I have a list item that displays a hidden div once its clicked. I want to be able to hide the div if the list item is click on again. How can I do this?
$(function () {
"use strict";
function resetTabs() {
$("#sub_content > div").hide(); //Hide all content
$("#tabs a").removeClass("current"); //Reset id's
}
$("#sub_content > div").hide(); // Initially hide all content
$("#tabs a").on("click", function (e) {
e.preventDefault();
resetTabs();
$(this).addClass("current"); // Activate this
$($(this).attr('name')).fadeIn(); // Show content for current tab
});
});
http://jsfiddle.net/E9mPw/
Thanks.

You can use fadeToggle()
$($(this).attr('name')).fadeToggle();
http://jsfiddle.net/E9mPw/2/

you just can add "if" statement, if you just want to fix your script
$("#tabs a").on("click", function (e) {
e.preventDefault();
if($(this).hasClass('current')){
resetTabs();
}
else{
resetTabs();
$(this).addClass("current"); // Activate this
$($(this).attr('name')).fadeIn(); // Show content for current tab
}
});
http://jsfiddle.net/E9mPw/7/

You can use toggle jquery properties.
$("#tabs a").on("click", function (e) {
e.preventDefault();
resetTabs();
$(this).toggle("current");
});
You chould check this links

You can check if the a has the class current and fade it out accordingly:
$("#tabs a").on("click", function (e) {
e.preventDefault();
//resetTabs();
if($(this).hasClass("current"))
{
$(this).removeClass("current");
$($(this).attr('name')).fadeOut(); // Hide content for current tab
}
else
{
$(this).addClass("current"); // Activate this
$($(this).attr('name')).fadeIn(); // Show content for current tab
}
});
JSFiddle

JS Dropdown menu not closing?

So I found this fiddle here: http://jsfiddle.net/8qPvp/4/
I thought I'd use it just for personal education purposes.
I'm really new with JS, and I noticed that the opened parent does not go back on click, like it opens. How could this be fixed?
$(document).ready(function () {
$("li").click(function () {
$('li > ul').hide();
$(this).children("ul").toggle();
});
});

What about this:
$("li").click(function () {
$('li > ul').hide();
$(this).children("ul").toggle();
});
$(document).click(function()
{
$('li > ul:visible').hide();
})
$('.menu li').click(function(e)
{
e.stopPropagation();
})
So by default i make whenever there is clicked ANYWHERE in the document, your visible menu will be hidden. However you don't want this to happen when you open a new menu(would be; made visible and made hiden directly). So i make a exception that catch when you want to open a new menu and i'll cancel the document click event.I use event.stopPropagation() to cancel a event.
jsFiddle

$(document).ready(function () {
$("li").click(function () {
$('li > ul').hide();
$(this).children("ul").toggle();
}).mouseleave(function(){
$(this).children("ul").hide();
});
});
Check this fiddle http://jsfiddle.net/Aveendra/8qPvp/18/