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
Related
I ran into this problem that if I toggleClass on the same container using different links trying to show different content it wont show the container on any second link right away. Basically it will close the container and then I would have to click the link once again in order to show the content. I am trying to achieve tabs effect using the same container and toggleClass and unfortunately I can't figure out of how to show the container right away on second link. I would appreciate any advice.
Here is a live example http://jsbin.com/eyEnEvEC/1/
and the entire code.
CSS
.container {
display:none;
}
.show {
display:block;
}
HTML
Link 1
Link 2
<div class="container"></div>
Javascript
$(function(){
$('#link1').click(function(){
$('.container').html('Test 1');
$('.container').toggleClass('show');
return false;
});
$('#link2').click(function(){
$('.container').html('Test 2');
$('.container').toggleClass('show');
return false;
});
});
Try this
HTML
Link 1
Link 2
JQuery
$(function(){
$.fn.toggleContent = function(ahtml) {
var cstatus = $(this).attr("data-status");
$("a[id^=link]").attr("data-status","inactive");
if(cstatus == "inactive") {
$('.container').html(ahtml).show();
$(this).attr("data-status","active");
}
else {
$('.container').html(ahtml).hide();
$(this).attr("data-status","inactive");
}
return false;
};
$('#link1').click(function(){
$(this).toggleContent('Test 1');
});
$('#link2').click(function(){
$(this).toggleContent('Test 2');
});
});
Demo : http://jsbin.com/eyEnEvEC/9/edit
I'm using TB 3 in my app. I'm using some nav tabs and I want to by default disable a few as follows (this is not part of a drop-down menu):
<ul class="nav">
<li class="disabled">Tab</li>
</ul>
My disable function:
$('.nav li.disabled').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
});
The goal is to remove .disabled when a condition is met so the link is re-enabled or clickable again. This changes the appearance of the tab only, not the functionality. Further tests show shown.bs.tab is still fired no matter what I do here.
Apparently, bootstrap doesn't "like" changing active tabs.
Here's the working jsFiddle (Bootstrap 3.0).
And the working jsFiddle (Bootstrap 2.3.2).
Here's the idea:
$(document).ready(function() {
$('#store-tab').attr('class', 'disabled');
$('#bank-tab').attr('class', 'disabled active');
$('#store-tab').click(function(event) {
if ($(this).hasClass('disabled')) {
return false;
}
});
$('#bank-tab').click(function(event) {
if ($(this).hasClass('disabled')) {
return false;
}
});
$('.selectKid').click(function(event) {
$('li').removeAttr("disabled");
$('#bank-tab').attr('class', 'active');
$('#store-tab').attr('class', '');
});
});
Courtesy of.
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
I am using a jQuery Accordion for my sidebar navigation. Currently I have 2 links which both have 'children' beneath them.
Here is my jsFiddle: http://jsfiddle.net/6Eh8C/
You'll notice that when you click 'About Us', the Gallery closes. This shouldn't happen. Gallery should only close when I click 'Gallery'.
How do I fix this?
Here is my jQuery:
jQuery(function($) {
$('#accordion > li > a').click(function (e) {
if ($(this).next('ul').length == 0) {
// link is for navigation, do not set up accordion here
return;
}
// link is for accordion pane
//remove all the "Over" class, so that the arrow reset to default
$('#accordion > li > a').not(this).each(function () {
if ($(this).attr('rel')!='') {
$(this).removeClass($(this).attr('rel') + 'Over');
}
$(this).siblings('ul').slideUp("slow");
});
//showhide the selected submenu
$(this).siblings('ul').slideToggle("slow");
//addremove Over class, so that the arrow pointing downup
$(this).toggleClass($(this).attr('rel') + 'Over');
e.preventDefault();
});
$('.slides_item').children('div').css('background','#ededed')
});
Many thanks for any pointers :-)
I think you just want to remove one line:
$('#accordion > li > a').not(this).each(function () {
if ($(this).attr('rel')!='') {
$(this).removeClass($(this).attr('rel') + 'Over');
}
// Remove this line, you don't want to slide up other uls.
// $(this).siblings('ul').slideUp("slow");
});
Example: http://jsfiddle.net/6Eh8C/1/
I have two divs : #mosaic-content & #mosaic-content-1.
Initially, when the loads, #mosaic-content will be displayed with a class .active and #mosaic-content-1 will be hidden.
I have 4 links:
Home
Event
Gallery
About
The div #mosaic-content-1 should be displayed only when the user clicks on About. For all the other 3 clicks, it has to remain hidden.
I wrote the following code to achieve this:
$(function () {
$("#mosaic-content").addClass("active");
$("#mosaic-content-1").hide();
});
$("#home, #event, #gallery").click(function () {
$("#mosaic-content").show();
$("#mosaic-content").addClass("active");
$("#mosaic-content-1").hide();
$("#mosaic-content-1").removeClass("active");
});
$("#about").click(function () {
$("#mosaic-content").hide();
$("#mosaic-content").removeClass("active");
$("#mosaic-content-1").show();
$("#mosaic-content-1").addClass("active");
});
However, in the above code, if #mosaic-content is shown and then the user clicks Event or Gallery, the functions are run again, which makes my website a bit slow( The divs are full with a lot of HTML content).
Is there any better way of achieving this?
use .is(':visible') to check if the div is already visible
$(function () {
$("#mosaic-content").addClass("active");
$("#mosaic-content-1").hide();
});
$("#home, #event, #gallery").click(function () {
if(!$("#mosaic-content").is(':visible')){
$("#mosaic-content").show();
$("#mosaic-content").addClass("active");
$("#mosaic-content-1").hide();
$("#mosaic-content-1").removeClass("active");
}
});
$("#about").click(function () {
if($("#mosaic-content").is(':visible')){
$("#mosaic-content").hide();
$("#mosaic-content").removeClass("active");
$("#mosaic-content-1").show();
$("#mosaic-content-1").addClass("active");
}
});
Use classes, not id's.
Hide as default block .mosaic-content-1:
$(".mosaic-content-1").hide();
After show block .mosaic-content
$(".mosaic-content").show();
Onlick functions in block navigation:
$(".navigation a").click(function() {
if(!$(this).hasClass("about");) {
$(".navigation a").removeClass("active");
$(this).addClass("active");
$(".mosaic-content-1").hide();
$(".mosaic-content").show();
} else {
$(".navigation a").removeClass("active");
$(this).addClass("active");
$(".mosaic-content").hide();
$(".mosaic-content-1").show();
}
});