I'd like to control a single tab-pane using multiple groups of nav buttons buttons. Currently, the previous nav is not deactivated when a new nav is activated in the other nav group. Thus, two nav buttons are activated at any given time.
First Nav menu:
<!-- Nav Menu 1 -->
<ul class="nav nav-pills nav-stacked" id="myTab">
<li class="active">TAB ONE</li>
<li><a href="#tab-2" data-toggle="tab">TAB TWO</li>
<li><a href="#tab-3" data-toggle="tab">TAB THREE</li></ul>
Second Nav menu:
<!-- Nav Menu 2 -->
<ul class="nav nav-pills nav-stacked" id="myTab">
<li>TAB FOUR</li>
<li><a href="#tab-5" data-toggle="tab">TAB FIVE</li>
<li><a href="#tab-6" data-toggle="tab">TAB SIX</li> </ul>
And the Tab Panel:
<div class="tab-content" id="myTab">
<div class="tab-pane fade in active" id="tab-1">
<p>TAB ONE CONTENT</p>
</div>
<div class="tab-pane fade in active" id="tab-2">
<p>TAB TWO CONTENT</p>
</div>
<div class="tab-pane fade in active" id="tab-3">
<p>TAB THREE CONTENT</p>
</div>
<div class="tab-pane fade in active" id="tab-4">
<p>TAB FOUR CONTENT</p>
</div>
<div class="tab-pane fade in active" id="tab-5">
<p>TAB FIVE CONTENT</p>
</div>
<div class="tab-pane fade in active" id="tab-6">
<p>TAB SIX CONTENT</p>
</div>
Again, the buttons control the Tab Panel correctly, HOWEVER the previous Nav button is not deactivated when clicking on one from the other Nav div.
From what I understood from the question, you needed the class="active" link from group one removed if you click group two, and vice-versa. I achieved this using a quick and dirty Javascript function:
Html:
<ul class="nav nav-pills nav-stacked" id="tabGroupOne">
<li class="active">TAB ONE</li>
<li>TAB TWO</li>
<li>TAB THREE</li>
</ul>
<ul class="nav nav-pills nav-stacked" id="tabGroupTwo">
<li>TAB FOUR</li>
<li>TAB FIVE</li>
<li>TAB SIX</li>
</ul>
Javascript/jQuery:
$("#tabGroupTwo").children().click(function(e){
$("#tabGroupOne").children().each(function(f){
$(this).removeClass("active");
});
});
$("#tabGroupOne").children().click(function(e){
$("#tabGroupTwo").children().each(function(f){
$(this).removeClass("active");
});
});
Basically, when you click on any <li> item in list one, it will remove the active class of any of the links in group two. Vice-versa for clicking any of the links in group two.
An alternative is to disable all other ul class="nav nav-pills" children whenever any link is clicked, but the above should suffice as long as you keep the navs to a max of two.
Note, you also had some html markup issues: Multiple IDs and missing </a> tags. These could also cause your code to behave oddly.
Here's the working version:
Bootply
Related
I am trying to to build a multi level bootstrap tabs with breadcrumbs above it.
The idea is to expand breadcumbs as you go through tabs1 to 3. That works.
And then I would like to hide last breadcrumb element once you go from fully expanded multi tabs to new tab, where there is no expanded tabs yet.
The code for breadcrumbs is:
<ul id="catLevelBreadcrumbs">
<li role="presentation" class="active breadElement breadElementL1">
<span>Step 1</span></li>
<ul id="catLevelBreadcrumbsInner">
<li role="presentation" class="breadElement breadElementL2 showBreadL2">
<span>Step 2</span></li>
<li role="presentation" class="breadElement breadElementL3 showBreadL3">
<span>Step 3</span></li>
</ul>
</ul>
enter image description here
And then there is multi tabs
- cat1L
- cat2L
-cat3L
<ul id="catLevel1" class="nav nav-tabs" role="tablist">
<li class="kat1-tab-0-faq active"></li>
<li class="kat1-tab-1-faq"></li>
</ul>
<div id="contentLevel1">
<div role="tabpanel" class="tab-pane fade" id="first-cat-faq"></div>
<div role="tabpanel" class="tab-pane fade active in" id="second-cat-faq">
<ul id="catLevel2" class="nav nav-tabs" role="tablist">
<li class="kat2-tab-0-faq active"></li>
<li class="kat2-tab-1-faq"></li>
</ul>
<div id="contentLevel2">
<div role="tabpanel" class="tab-pane fade active in" id="first-cat-faq-l2"></div>
<div role="tabpanel" class="tab-pane fade" id="second-cat-faq-l2"></div>
</div>
</div>
</div>
enter image description here
I am trying to solve it with such js code, but It fails to do what I planned.
jQuery(document).on('click', '#catLevel1.nav-tabs > li' ,function(e){
$this = jQuery(this);
if(!$this.parent().next().find('#catLevel2 > li.active').hasClass('active'))
{
console.log('is active');
jQuery('.breadElement.breadElementL3').removeClass('showBreadL3');
}
});
Focus here is... the tab that I click needs to be the only one selected, even if there are two sets of tabs on my page (as shown below):
http://codepen.io/mutualdesigns/pen/pbGjbX
NOTE: Once I click in one of the tabs above, and then one below, I have two tabs selected at the same time. If I had a third set of tab, and clicked a link on this third set, I was going to have 3 activated (selected) links...
HOW DO I GET ONLY THE LINK I CLICKED SELECTED (EVEN THOUGH THERE'S ANOTHER SELECTION IN ONE OF THE OTHERS SETS OF TABS)?
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="1">1</div>
<div role="tabpanel" class="tab-pane" id="2">2</div>
<div role="tabpanel" class="tab-pane" id="3">3</div>
<div role="tabpanel" class="tab-pane" id="4">4</div>
<div role="tabpanel" class="tab-pane" id="5">5</div>
<div role="tabpanel" class="tab-pane" id="6">6</div>
<div role="tabpanel" class="tab-pane" id="7">7</div>
<div role="tabpanel" class="tab-pane" id="8">8</div>
</div>
</div>
A solution (neither the best, nor the prettiest) is the following. I based it loosely on suggestions given here
<script>
function toggle(clickedElem) {
// Store all active elements in a variable for later use
var elements = document.querySelectorAll(".nav-tabs li.active");
// Iterate over the elements and remove the active class from the classlist. We made sure there was a active class by using the querySelector
for (var i = 0; i < elements.length; i++) {
elements[i].classList.remove('active');
}
// Add the active class to the parent of the clicked link
clickedElem.parentElement.classList.add("active");
}
</script>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!--not going to be repeating the same code but the rest of your code continues here(add the onclick to the other tags obviously)-->
This could also be done using jQuery. For that you'd be using toggleClass or removeClass/addClass
P.S. emphasized text (template after clicking the I in the editor.
Overview:
I want to make two level navigation of tab-content with one level content. This is my code:
<ul>
<li>
<a data-toggle="tab" href="#main">Main</a>
</li>
<li>
<ul>
<li>
<a data-toggle="tab" href="#nested">Nested</a>
</li>
</ul>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="main">Main Content</div>
<div class="tab-pane" id="nested">Nested Content</div>
</div>
It doesn't work when I do the following steps:
Click Main
Click Nested
Click Main
Details:
Initially everything is ok, code in browser looks like from source.
When I click on Main i works
When I click on Nested active class doesn't removed from first li.
Now can I click whatever and nothing happens.
JSFiddle
https://jsfiddle.net/cvgd720s/
Docs
http://getbootstrap.com/javascript/#tabs
You can nest your child tabs like so:
<div class="container">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
Home
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Nested 1</li>
<li role="presentation">Nested 2</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="nested1">Nested 1</div>
<div role="tabpanel" class="tab-pane" id="nested2">Nested 2</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile</div>
<div role="tabpanel" class="tab-pane" id="messages">Messages</div>
<div role="tabpanel" class="tab-pane" id="settings">Settings</div>
</div>
</div>
CODEPEN
I solved this problem myself added the script, that remove any active class:
<script>
(function(){
var menu = document.getElementsByTagName("li")[0];
var list = document.querySelectorAll("li");
menu.addEventListener("click", function() {
[].forEach.call(list, function(item) {
item.classList.remove("active");
});
});
})();
</script>
It is important, that script should be placed before jquery.js and bootstrap.js.
Can you please tell me how to make a nested list in slide panel in jQuery?
I am able to make a slide panel, but I want to make nested list in left panel in jQuery.
http://jsfiddle.net/qUMbC/31/
can we make nested list in slide panel ?
<div data-role="page" class="jqm-demos" data-quicklinks="true">
<div data-role="header">
<h1>External panels</h1>
</div>
<div role="main" class="ui-content jqm-content jqm-fullwidth"> Open External Panel
</div>
</div>
<div data-role="panel" id="externalpanel" data-position="left" data-display="reveal" data-theme="a">
<h2>Menu</h2>
<ul data-role="listview" style="padding-right: 8px">
<li data-icon="false"><a href="#" class='sub1'>Submenu 1</a>
</li>
<li data-icon="false">Submenu 2
</li>
</ul>
<!-- submenu -->
</div>
Assuming you want the inner list to remain hidden until its parent is clicked, something like this might give you an idea:
HTML:
<ul id="myList" data-role="listview" style="padding-right: 8px">
<li data-icon="false"><a href="#" class='sub1'>Submenu1</a>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li data-icon="false">Submenu 2
</li>
</ul>
CSS:
#myList ul {
display: none;
}
JavaScript:
$('#myList > li').click(function() {
var subList = $(this).children('ul');
if (subList.is(":hidden"))
subList.slideDown(200);
else
subList.slideUp(200);
});
JSFiddle demo
I thought I ask SO for help before I file a bugreport. I have a twitter bootstrap tab inside another tab, and wenn I click to change to the next inner tab, bootstrap.js does not only remove the .active from the closest .tab-pane, but also from the outer .tab-pane. I tried to dive into the code, but my javascript isn't good enough to fully understand it. I tried to manually add the active class to the outer .tab-pane with jquery and also tried .tab('show') on the data-toggle="tab" element. It seems like that bootstrap.js finds all .tab-content and then removes the .active from its children. Or maybe I have a mistake in my markup (well from experience 99% of the time it's human error). The javascript is all boilerplate, I just call the first tab with tab('show'). Here's my markup:
<ul id="sidebar" class="unstyled naviTab">
<li class="accordion-group">...</li>
<li class="accordion-group active">
<h2 id="module1-title1" class="module-header" href="#getting-started" data-toggle="tab" data-original-title="">...</h2>
</li>
</ul>
...
...
<ul class="unstyled tab-content">
<li id="course" class="tab-pane">
<li id="getting-started" class="tab-pane active">
<div class="wizard stepTab">
<a class="active" href="#module1-step1" data-toggle="tab">1.Step</a>
<a class="" href="#module1-step2" data-toggle="tab">2.Step</a>
<a class="" href="#module1-step3" data-toggle="tab">3.Step</a>
</div>
<ul class="links unstyled tab-content">
<li id="module1-step1" class="tab-pane active" data-original-title="">...</li>
<li id="module1-step2" class="tab-pane">
<li id="module1-step3" class="tab-pane">
</ul>
</li>
</ul>
And after clicking a href="#module1-step2":
<ul id="sidebar" class="unstyled naviTab">
<li class="accordion-group">...</li>
<li class="accordion-group active">
<h2 id="module1-title1" class="module-header" href="#getting-started" data-toggle="tab" data-original-title="">...</h2>
</li>
</ul>
...
...
<ul class="unstyled tab-content">
<li id="course" class="tab-pane">
<li id="getting-started" class="tab-pane">
<div class="wizard stepTab">
<a class="" href="#module1-step1" data-toggle="tab">1.Step</a>
<a class="active" href="#module1-step2" data-toggle="tab">2.Step</a>
<a class="" href="#module1-step3" data-toggle="tab">3.Step</a>
</div>
<ul class="links unstyled tab-content">
<li id="module1-step1" class="tab-pane" data-original-title="">...</li>
<li id="module1-step2" class="tab-pane active">
<li id="module1-step3" class="tab-pane">
</ul>
</li>
</ul>
Notice how the outer tab-panes are all inactive.
If anybody has run into this problem or can tell me where I messed up I'd be very grateful!
EDIT1
Here's my javascript. I actual don't have to include any js because bootstrap.js works just fine just with the html attributes(and that's probably the reason why it breaks). I tried different approaches (.each(), e.preventDefault()) but nothing seemed to work. But here's my js anyway:
<script>
/*global $*/
"use strict";
$(function () {
$('.naviTab li:first-child h1').tab('show'); //shows the first child of the outer tab on load. Could just add an .active to the markup instead
$('#sidebar li:first-child').addClass('active'); //this is for the accordion that the outer tab links are enbedded in
$('.stepTab a').click(function () {
if ($(this).closest('li').hasClass('active') == false) { //this is supposed to check if the outer tab has .active and add it if it doesn't. Unfortunately it doesn't work...
$(this).closest('li').addClass('active');
}
$(this).siblings().removeClass('active'); //this is for css styling purposes on the inner tab a's
$(this).addClass('active');
});
});
</script>
Cheers for any suggestions!
As stated by albertedevigo you only need to provide a unique ID's to each tab, no matter if the tab is nested, this is because the javascript action will open/close this specific tab:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 3</li>
<li>Section 4</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab3">
<p>I'm in Section 3.</p>
</div>
<div class="tab-pane" id="tab4">
<p>Howdy, I'm in Section 4.</p>
</div>
</div>
</div>
</div>
</div>
Take a look at jsfiddle.net/simbirsk/RS4Xh/2
maybe this should help http://www.juvenpajares.com/?p=204 Custom Accordion Using Bootstrap Framework
The problem was that I didn't use an for the links in the inner tabs, but just a div with a's(had to do it for css reasons). I didn't know that bootstrap requires the links to be in a ul > li > a format. Now it know! I'll leave the question in case somebody has the same problem. Cheers for the help!