Bootstrap 2.1 javascript nested tabs: inner tab closes outer tab

Question

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!

Can you post your Javascript? Maybe you are selecting both elements... — albertedevigo
I updated the post and included the js. It works the same even if I don't include any js and just set the active on the first outer tab manually in the markup. My attempts to stop the default behavior didn't work either. My guess is that bootstrap has a bug and looks for all tab-contents when it removes the .active from tab-panes. — tiwei
I'm afraid you found a bug. I've nested tabs from documentation and the issue persists. Take a look: jsfiddle.net/simbirsk/RS4Xh/1 — albertedevigo
You're right! it's a slightly different setup and a slightly different bug (in this case the outer tab isn't set to deactive, but instead the inner tab does't switch to the next tab and then breaks if you want to go back. I'll file a bugreport for both! — tiwei
There was an error in my jsfiddle, changing ids it works: jsfiddle.net/simbirsk/RS4Xh/2 — albertedevigo

Alexandro Giles Alexandro Giles · Accepted Answer · 2014-10-18T18:24:21

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"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></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"><a href="#tab3" data-toggle="tab">Section 3</a></li>
                <li><a href="#tab4" data-toggle="tab">Section 4</a></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

Bootstrap 2.1 javascript nested tabs: inner tab closes outer tab

3 Answers