Bootstrap 3: Triple nested tab error

Question

I have a triple nested tab in my page. Whenever I activate a middle tag, it stays activated even when I click out of the first tab onto another tab. Here is an example in a jsfiddle.

http://jsfiddle.net/jNWMY/2/

For example:

• Try clicking Acquisition then All Device then Facebook
• Click Engagement tab in first row
• Bottom row does not deactivate

Second example:

• Try clicking Acquisition then All Device then Facebook
• Click Desktop tab in second row
• Bottom row does not deactivate

Answer 1

• The first example provided by you can be solved by enclosing nav-tabs and tab-content under tabbable class. Try like this:

jsfiddle

<div id="dashboard_container" style="padding-left:50px; padding-right:50px; padding-bottom:50px; padding-top:10px;">
        <h1> Dashboard </h1>

    <div class="tabbable">
        <ul class="nav nav-tabs" id="dashboard_tabs">
            <li> 
                <a href="#acquisition_tab" data-toggle="tab">
                <b>Acquisition</b> 
                <span style="color:red">(-30%)</span> 
                <br/> 
                Total Installs
            </a>

            </li>
            <li> <a href="#engagement_tab" data-toggle="tab">
                Engagement
            </a>

            </li>
            <li> <a href="#retention_tab" data-toggle="tab">
                Retention
            </a>

            </li>
            <li> <a href="#revenue_tab" data-toggle="tab">
                Revenue
            </a>

            </li>
        </ul>

        <div class="tab-content">
            <div id="acquisition_tab" class="tab-pane">
                <div class="tabbable">
                    <ul class="nav nav-tabs" id="acquisition_tabs">
                        <li> <a href="#all_device_acquisition_tab" data-toggle="tab">
                        <b>All Device</b> 
                        <span style="color:red">(-30%)</span> 
                        <br/> Total Installs
                    </a>

                        </li>
                        <li> <a href="#desktop_acquisition_tab" data-toggle="tab">
                        <b>Desktop</b> 
                        <span style="color:red">(-30%)</span> 
                        <br/> 
                        Total Installs
                    </a>

                        </li>
                        <li> <a href="#mobile_acquisition_tab" data-toggle="tab">
                        <b>Mobile</b> 
                        <span style="color:red">(-30%)</span> 
                        <br/> 
                        Total Installs
                    </a>

                        </li>
                    </ul>

                    <div class="tab-content">
                        <div id="all_device_acquisition_tab" class="tab-pane">
                            <div class="tabbable">
                                <ul class="nav nav-tabs" id="all_device_acquisition_tabs">
                                    <li> <a href="#ad_all_acquisition_tab" data-toggle="tab">
                            <b>All</b> 
                            <span style="color:red">(-30%)</span> 
                            <br/> 
                            Total Installs
                        </a>

                                    </li>
                                    <li> <a href="#ad_gamefuse_acquisition_tab" data-toggle="tab">
                            <b>Gamefuse</b> 
                            <span style="color:red">(-30%)</span> 
                            <br/> 
                            Total Installs
                        </a>

                                    </li>
                                    <li> <a href="#ad_facebook_acquisition_tab" data-toggle="tab">
                            <b>Facebook</b> 
                            <span style="color:red">(-30%)</span> 
                            <br/> Total Installs
                        </a>

                                    </li>
                                    <li> <a href="#ad_kongregate_acquisition_tab" data-toggle="tab">
                            <b>Kongregate</b> 
                            <span style="color:red">(-30%)</span> 
                            <br/> Total Installs
                            </a>

                                    </li>
                                    <li> <a href="#ad_yahoo_acquisition_tab" data-toggle="tab">
                            <b>Yahoo</b> 
                            <span style="color:red">(-30%)</span> 
                            <br/> Total Installs
                        </a>

                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div id="ad_all_acquisition_tab" class="tab-pane">
                                        <p>all device ALL Acquisition</p>
                                    </div>
                                    <div id="ad_gamefuse_acquisition_tab" class="tab-pane">
                                        <p>all device GAMEFUSE Acquisition</p>
                                    </div>
                                    <div id="ad_facebook_acquisition_tab" class="tab-pane">
                                        <p>all device facebook Acquisition</p>
                                    </div>
                                    <div id="ad_kongregate_acquisition_tab" class="tab-pane">
                                        <p>all device kongregate Acquisition</p>
                                    </div>
                                    <div id="ad_yahoo_acquisition_tab" class="tab-pane">
                                        <p>all device yahoo Acquisition</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="engagement_tab" class="tab-pane">
                <p>Engagement tab</p>
            </div>
            <div id="retention_tab" class="tab-pane">
                <p>Retention tab</p>
            </div>
            <div id="revenue_tab" class="tab-pane">
                <p>Revenue tab</p>
            </div>
        </div>
    </div>
</div>

• And for the second mentioned problem you haven't provided tab-content for desktop and mobile tabs