Develop Reference

Nested list in Bootstrap tab.js [active class is not removed]

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.

addClass to change html text when selected

I have created a Jquery drop down which adds and removes class when selected.
JSFIDDLE
Inside the hidden menu is a nav bar with links. I am trying to create a function when you select one of the links the name of the link replaces the text on the menu button.
<div class="btn-container menu small-4 medium-2">
<a class="inline-block btn no-text-trans">sector</a>
<i class="fa fa-chevron-down"></i>
<article class="pane inactive">
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
</article> <!-- PANE ENDS HERE -->
</div> <!-- BTN CONTAINER ENDS HERE -->
For example if the button menu one is selected, the text 'menu 1' replaces the text 'sector'

Add a class to all hidden menu <a> say class="links" and write an event to capture click as below:
$(".links").on('click',function(){
$(this).closest('article').siblings('.no-text-trans').text($(this).text());
});
Updated html
<article class="pane inactive">
<nav>
<ul>
<li><a class="links" href="#">Menu 1</a></li>
<li><a class="links" href="#">Menu 1</a></li>
<li><a class="links" href="#">Menu 1</a></li>
<li><a class="links" href="#">Menu 1</a></li>
</ul>
</nav>
</article> <!-- PANE ENDS HERE -->
DEMO
UPDATE
Add an extra data-* attribute to your 'no-text-trans' anchor like one below:
<a class="inline-block btn no-text-trans" data-original="products">products</a>
to store its original text and then write a document click event to capture all other clicks and check whether the target was anchor or its children and if yes do the default action else replace the text, as below:
$(document).on('click',function(e){
//check if targeted element is link or its children
if($(e.target).hasClass('links') || $(e.target).hasClass('no-text-trans'))
return;
//if not replace each anchor with its original text taking from its `data-original` attribute
$('.no-text-trans').each(function(){
$(this).text($(this).data('original')).siblings('article').addClass('inactive');
});
});
Updated DEMO

You can try
$(document).click(function(e) {
var $target = $(e.target),
$ct = $target.closest('.btn-container'),
$pane = $ct.find('.pane.inactive');
$pane.add($('.pane:not(.inactive)')).toggleClass('inactive');
if ($target.closest('.pane a').length) {
$ct.find('.btn').text($target.text())
}
});
.inactive {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-container menu small-4 medium-2">
<a class="inline-block btn no-text-trans">sector</a>
<i class="fa fa-chevron-down"></i>
<article class="pane inactive">
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
</article> <!-- PANE ENDS HERE -->
</div> <!-- BTN CONTAINER ENDS HERE -->
<div class="btn-container menu small-4 medium-2">
<a class="inline-block btn no-text-trans">products</a>
<i class="fa fa-chevron-down"></i>
<article class="pane inactive">
<nav>
<ul>
<li><p>Menu 1</p></li>
<li><p>Menu 2</p></li>
<li><p>Menu 3</p></li>
<li><p>Menu 4</p></li>
</ul>
</nav>
</article> <!-- PANE ENDS HERE -->
</div> <!-- BTN CONTAINER ENDS HERE -->

Boostrap 3, Multiple Nav to control single Tab-Pane

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

Best way to Hide or Show contents of div based on list based menu

I have to show or hide contents of div based on the menu selection.
Below is my structure
<div id = "menuContainer">
<p>Menu</p>
<ul>
<li>Home</li>
<li>Menu Two
<ul>
<li>Sub Menu One</li>
<li>Sub Menu Two</li>
<li>Sub Menu Three</li>
<li>Sub Menu Four</li>
</ul>
</li>
<li>Menu Three</li>
<li>Contact</li>
</ul>
</div>
<div class="row">
<div id="home" > <h1>This is Home Page </h1></div>
<div id="MenuTwo" class="content"> <h1>This is Menu Two page</h1></div>
<div id="SubMenuOne" class="content"><h1> This is Sub Menu One Page</h1></div>
<div id="SubMenuTwo" class="content"><h1>This is Sub Menu Two Page </h1></div>
<div id="SubMenuThree" class="content"> <h1>This is Sub Menu THree Page</h1></div>
<div id="SubMenuFour" class="content"><h1> This is Sub Menu Four Page</h1></div>
<div id="MenuThree" class="content"> <h1>This is Menu THree Page</h1></div>
<div id="MenuFour" class="content"> <h1>This is Menu Four Page</h1></div>
<div id="Contact" class="content"> <h1>This is Contact Page</h1></div>
</div>
I found also an example on stack-overflow which does a similar thing.
It seems to use Dojo which I am not familiar with. Is there any other way of doing it with an easy script?
My fiddle example:http://jsfiddle.net/bG46Z/1/

If you want to do the same thing in Dojo, it's also possible:
require([ "dojo/query", "dojo/dom-attr", "dojo/domReady!", "dojo/NodeList-dom", "dojo/NodeList-traverse" ], function(query, domAttr) {
query("#menuContainer a").on("click", function(evt) {
query(".row > div")
.style("display", "none")
.parents(".row")
.query(domAttr.get(evt.target, "href"))
.style("display", "block");
});
});
For example: http://jsfiddle.net/YBae9/

The JSFIDDLE LINK
The JQUERY :
$(document).ready(function () {
$('.row div').hide();
$('#home').show(); // if you want to show the home div first
$('#menuContainer a').click(function () {
var id = $(this).attr('href');
$('.row div').hide();
$(id).fadeIn("250");
});
});
The new HTML :
<div id = "menuContainer">
<p>Menu</p>
<ul>
<li>Home</li>
<li>Menu Two
<ul>
<li>Sub Menu One</li>
<li>Sub Menu Two</li>
<li>Sub Menu Three</li>
<li>Sub Menu Four</li>
</ul>
</li>
<li>Menu Three</li>
<li>Contact</li>
</ul>
</div>
<div class="row">
<div id="home" > <h1>This is Home Page </h1></div>
<div id="MenuTwo" class="content"> <h1>This is Menu Two page</h1></div>
<div id="SubMenuOne" class="content"><h1> This is Sub Menu One Page</h1></div>
<div id="SubMenuTwo" class="content"><h1>This is Sub Menu Two Page </h1></div>
<div id="SubMenuThree" class="content"> <h1>This is Sub Menu THree Page</h1></div>
<div id="SubMenuFour" class="content"><h1> This is Sub Menu Four Page</h1></div>
<div id="MenuThree" class="content"> <h1>This is Menu THree Page</h1></div>
<div id="MenuFour" class="content"> <h1>This is Menu Four Page</h1></div>
<div id="Contact" class="content"> <h1>This is Contact Page</h1></div>
</div>

Bootstrap 2.1 javascript nested tabs: inner tab closes outer tab

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!