When I click a parent menu (like Domains), it shows it's children, when I click one of them (like, My Domains), the page reloads with the parent menu closed (not expanded, as the image bellow)
The classes are "active" for menu active (blue background) and "open" for visible children
These are the JS codes:
// Handle clicking on the naviagtion dropdown items
jQuery('.navbar .toggle > a').click(function() {
if (!jQuery(this).next().is(":visible")) {
jQuery('.toggle a').removeClass('open');
jQuery('.toggle ul:visible').hide();
}
jQuery(this).toggleClass('open');
jQuery(this).next().slideToggle();
});
// Tabs Changer
// ===============================
//Default Action
jQuery(".tab-content").hide(); //Hide all content
if (jQuery(location).attr('hash').substr(1)!="") {
var activeTab = jQuery(location).attr('hash');
jQuery("ul").find('li').removeClass('open');
jQuery("ul.nav li").removeClass("active"); //Remove any "active" class
jQuery(activeTab+"nav").addClass("active");
jQuery(activeTab).show();
} else {
jQuery("#tabs ul.nav .nav-tabs li:first").addClass("active").show(); //Activate first tab
jQuery(".tab-content:first").show(); //Show first tab content
}
//On Click Event
jQuery("#tabs ul.nav li").click(function() {
jQuery("ul").find('li').removeClass('open');
jQuery("ul.nav li").removeClass("active"); //Remove any "active" class
jQuery(this).addClass("active"); //Add "active" class to selected tab
var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
if (activeTab.substr(0,1)=="#" && activeTab.substr(1)!="") { //Determine if a tab or link
jQuery(".tab-content").hide(); //Hide all tab content
jQuery(activeTab).fadeIn(); //Fade in the active content
return false;
} else {
return true; // If link allow redirect
}
});
});
Click Login to see a live example of the menu:
https://whmcsdesigns.com/demo/clientarea.php?action=domains
If you load the page and enter the following, in the console, you will see that it works as you expect:
jQuery(".navbar .toggle.active > .nav-link").addClass('open');
jQuery(".navbar .toggle.active > ul").css('display', 'block');
However, you may run into some timing issues with this. It's not the best practice, to wrap it in jQuery(window).on, however it will get the job done:
jQuery(window).on('load', null, {}, function () {
jQuery(".navbar .toggle.active > .nav-link").addClass('open');
jQuery(".navbar .toggle.active > ul").css('display', 'block');
});
Normally, it should run synchronously, but for the sake of getting it to work, using window.onload will run this code when everything is finished loading, where we can safely assume that your menu will be ready to accept this code. So this may run much later (we're talking milliseconds), after the menu is initially setup up and ready for this code.
use event.preventDefault()
// Handle clicking on the naviagtion dropdown items
jQuery('.navbar .toggle > a').click(function(e) {
e.preventDefault();
if (!jQuery(this).next().is(":visible")) {
jQuery('.toggle a').removeClass('open');
jQuery('.toggle ul:visible').hide();
}
jQuery(this).toggleClass('open');
jQuery(this).next().slideToggle();
});
reference event.preventDefault()
in CSS you can show/hide div when menu item is active
Related
How can I edit my code so that the navbar closes when clicked outside of it but remain open if something inside of it is clicked?
$(document).ready(function() {
$('.nav-btn').on('click', function() {
$('.nav-btn').removeClass('active');
$(this).parent().find('.sub-menu').slideToggle();
$(this).toggleClass('active');
});
});
$(document).ready(function () {
$('.nav-btn').on('click', function (e) {
// Stop Document to be clicked when clicked in nav.
e.stopPropagation()
$('.nav-btn').removeClass('active');
var subMenu = $(this).parent().find('.sub-menu')
if (!$(".sub-menu").is(":visible")) {
$(this).parent().find('.sub-menu').slideToggle();
}
$(this).toggleClass('active');
});
// Toggle Sub Menu and remove active when Any vacant place is clicked
$(this).on('click', function (event) {
$('.nav-btn').removeClass('active');
$('.nav-btn').parent().find('.sub-menu').slideToggle();
});
// Prevent View close when Sub Items is clicked
$('.sub-menu').on('click', function (e) {
e.stopPropagation()
})
});
Hi, You just need to prevent the document click when clicked on the nav item and handle some additional things as done in the above code.
You can see Plunker example here also.
$(document).on('click', function (event) {
if ($(event.target).closest('.main-nav').length === 0) {
// Close button code
}
});
Another possible way is by wrapping all the content inside another div (except the header & navbar) and using the onclick tag:
<div onclick="hideNavbar()">
all your content goes here
</div>
function hideNavbar() {
$('.navbar-collapse').collapse('hide');
// getting the navbar div with jQuery
// and calling the function 'hide' of the Bootstrap class 'collapse'
}
I am super stuck trying to split a form up in multiple tabs but having issues with the next and previous buttons on the second and third tab.
I want the tabs on top to change state as you would cycle through the tabs by clicking the buttons.
I have created a code pen and if anyone out there knows what I am doing wrong please let me know.
https://codepen.io/austin-simpkins/pen/yLyNLem
$('.btnNext').click(function() {
$('.nav-pills > .active').next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function() {
$('.nav-pills > .active').prev('li').find('a').trigger('click');
});
The active class is being set on the a.nav-link node, so you need to look for the active state of that:
$('.btnNext').click(function(){
$('.nav-item > a.nav-link.active').parent().next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function(){
$('.nav-item > a.nav-link.active').parent().prev('li').find('a').trigger('click');
});
The active link is not the immediate child of nav-pills, so remove the child (>) selector:
$('.btnNext').click(function() {
$('.nav-pills .active').parent().next('li').find('a').trigger('click');
})
$('.btnPrevious').click(function() {
$('.nav-pills .active').parent().prev('li').find('a').trigger('click');
})
Demo
Bootstrap 4 Tabs with Previous & Next buttons
In mobile view of my page, when the menu option is selected, it drops down and an expanded class value is added. That value never gets removed once I click on a menu element. I need to remove the expanded class value when any item in the menu is clicked and remove the expanded menu since it covers the entire page of my one page site.
check in mobile view.
<nav class="top-bar" data-topbar="" style="position: fixed; top: 0px;">
.
.
.
</nav>
<script type="text/javascript">
$(document).ready(function () {
$(document).click(function (event) {
var clickover = $(event.target);
var _opened = $(".expanded").hasClass("expanded in");
if (_opened === true && !clickover.hasClass("navbar-toggle")) {
$("button.navbar-toggle").click();
}
});
});
</script>
You can do something like this.
You can remove that "expanded" class from the "top-bar" for each menu item click by checking that class is exist.
$(".top-bar-section ul li > a").click(function() {
if($('.top-bar').hasClass('expanded')){
$('.top-bar').removeClass('expanded')
}
});
Use $('#menuContent').toggleClass('expanded') when the menu button is clicked, and $('#menuContent').removeClass('expanded') when a menu item is clicked, like so:
$(document).ready(function() {
$('#menuButton').click(function(event) {
$('#menuContent').toggleClass('expanded');
});
$('.menuItem').click(function(event) {
$('#menuContent').removeClass('expanded');
});
});
Here is a fully functional JSFiddle to demonstrate.
I'm new to jquery and I have the following code that creates accordion style panels from divs. The code runs fine, however, if I click on a panel that's already open, it closes the panel, and then instantly reopens it. This only applies if its an already active panel. If I click a different one it works fine.
$(document).ready(function() {
$('.accordion-section-title').addClass('active');
// Open up the hidden content panel
$('.accordion ' + '#accordion-1').slideDown(300).addClass('open');
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active');
$('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).attr('href');
if($(e.target).is('.active')) {
close_accordion_section();
}else {
close_accordion_section();
// Add active class to section title
$(this).addClass('active');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
I've attached a js fiddle, It looks like the issue happens whenever I wrap the title in any tag, if its just blank text, it works fine.
https://jsfiddle.net/russ1337/ynfs4zw3/
based on your fiddle, I have found the problem.
Please see updated fiddle:
https://jsfiddle.net/ynfs4zw3/2/
The problem was the following code:
if($(e.target).is('.active')) {
close_accordion_section();
}else {
...
}
Your if statement said that if e.target is active but in if you clicked directly on the text, the target was the inside the .accordion-section-title div. Which did not have the .active class.
Try removing the close_accordion_section(); in the else statement:
$(document).ready(function() {
$('.accordion-section-title').addClass('active');
// Open up the hidden content panel
$('.accordion ' + '#accordion-1').slideDown(300).addClass('open');
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active');
$('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).attr('href');
if($(e.target).is('.active')) {
close_accordion_section();
}else {
// Add active class to section title
$(this).addClass('active');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
I want to remove all active classes when clicking anywhere on the screen, but if a clicked element has the .dropdown class, I would also want to toggle the .active class into that element.
// remove all .active classes when clicked anywhere
hide = true;
$('body').on("click", function () {
if (hide) $('.dropdown').removeClass('active');
hide = true;
});
// add and remove .active
$('body').on('click', '.dropdown', function () {
var self = $(this);
if (self.hasClass('active')) {
$('.dropdown').removeClass('active');
return false;
}
$('.dropdown').removeClass('active');
self.toggleClass('active');
hide = false;
});
I have this working with the above but I'm worried capturing a body click is overkill, and unnecessary. Is there a better solution?
jsiddle - I've set several li's to the .active class, if you click around you will see they get removed. Clicking an li will trigger toggleClass('active'), whilst still removing all .active classes.
you could try doing:
$('body').on("click", function (ev) {
if( $(ev.target).hasClass('.dropdown') ) {
//you clicked on .dropdown element, do something
}
else {
//you clicked somewhere other than dropdown element
}
});