Nested Bootstrap tabs not loading content correctly

Question

I am working on a Bootstrap project and I have loaded some nested tabs.

I have a designer tab and a code tab under each tab are more tabs.

The problem is when I change tabs designer to code and vice versa the nested tabs do not load up there content by default and must be selected.

This does not happen when the page loads only when the parent tabs are changed.

Demo available here, sorry description is pretty weak difficult to explain what I mean far easier to understand if you view the demo.

NOTE: Most of the CSS and JS in the demo is the Prism.js extension I do not think this is causing the problem (as it happens without) but I included the code just incase.

Reference:

<div class="container">
   <div class="row">
        <div class="col-sm-12">
            <div class="" role="tabpanel" data-example-id="togglable-tabs">
                <ul id="main-tabs" class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#des" id="des-tab" role="tab" data-toggle="tab" aria-controls="des" aria-expanded="true">Designer</a></li>
                    <li role="presentation"><a href="#code" role="tab" id="code-tab" data-toggle="tab" aria-controls="code">Code</a></li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="des" aria-labelledby="des-tab">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
                                    <ul id="myTab" class="nav nav-tabs" role="tablist">
                                        <li role="presentation" class="active dropdown">
                                            <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">Look <span class="caret"></span></a>
                                            <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
                                                <li><a href="#dropdown1" tabindex="-1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">Text</a></li>
                                                <li><a href="#dropdown2" tabindex="-1" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">Color</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                    <div id="myTabContent" class="tab-content">
                                        <div role="tabpanel" class="tab-pane fade in active" id="dropdown1" aria-labelledby="dropdown1-tab">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <h3 class="panel-title">Text</h3>
                                                </div>
                                                <div class="panel-body">
                                                    <div class="row">
                                                        <div class="col-sm-6">
                                                            Font-Family
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-default">Action</button>
                                                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                                                    <span class="caret"></span>
                                                                    <span class="sr-only">Toggle Dropdown</span>
                                                                </button>
                                                                <ul class="dropdown-menu" role="menu">
                                                                    <li><a href="#">Lato</a></li>
                                                                    <li><a href="#">Serif</a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-sm-6">
                                                            Font-Size
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <div class="input-group">
                                                                <input type="text" class="form-control" aria-label="...">
                                                                <div class="input-group-btn">
                                                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
                                                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                                                        <li><a href="#">px</a></li>
                                                                        <li><a href="#">em</a></li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div role="tabpanel" class="tab-pane fade" id="dropdown2" aria-labelledby="dropdown2-tab">
                                            <p>Test</p>
                                        </div>
                                    </div>
                                </div>


                            </div>
                            <div class="col-sm-6">
                                <div class="browser-mockup">
                                    <img src="http://placehold.it/500x300/fff/eee" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="code" aria-labelledby="code-tab">
                        <div class="row">
                            <div class="col-sm-6">
                                <pre><code class="language-markup">&lt;p>Hello World&lt;/p></code></pre>
                            </div>
                            <div class="col-sm-6">
                                <div class="" role="tabpanel" data-example-id="togglable-tabs">
                                    <ul class="nav nav-tabs" role="tablist">
                                        <li role="presentation" class="active"><a href="#sass" id="sass-tab" role="tab" data-toggle="tab" aria-controls="sass" aria-expanded="true">SASS</a></li>
                                        <li role="presentation"><a href="#less" role="tab" id="less-tab" data-toggle="tab" aria-controls="less">LESS</a></li>
                                        <li role="presentation"><a href="#css" role="tab" id="css-tab" data-toggle="tab" aria-controls="css">CSS</a></li>
                                    </ul>
                                    <div id="myTabContent" class="tab-content">
                                        <div role="tabpanel" class="tab-pane fade in active" id="sass" aria-labelledby="sass-tab">
                                            <pre><code class="language-scss">p {color:red}</code></pre>
                                        </div>
                                        <div role="tabpanel" class="tab-pane fade" id="less" aria-labelledby="less-tab">
                                            <pre><code class="language-less">p {color:red}</code></pre>
                                        </div>
                                        <div role="tabpanel" class="tab-pane fade" id="css" aria-labelledby="css-tab">
                                            <pre><code class="language-css">p {color:red}</code></pre>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

This happens because you have multiple divs using the myTabContent id.

You can either remove those id's or make them unique.

Here is an Updated Example