BootStrap having tabs within tabs

Question

I am trying to have tabs within tabs, and I got it to work. The problem is, when I switch from one tab to another, then go back to the tab with the sub tabs, the sub tabs active tab doesn't display what it's supposed to (blank).

Here's the code I used:

 <div class="container">
    <ul class="nav nav-tabs" data-tabs="tabs" id="tabs">
        <li class="active">
            <a data-toggle="tab" href="#red">Red</a>
        </li>

        <li>
            <a data-toggle="tab" href="#orange">Orange</a>
        </li>

        <li>
            <a data-toggle="tab" href="#yellow">Yellow</a>
        </li>

        <li>
            <a data-toggle="tab" href="#green">Green</a>
        </li>

        <li>
            <a data-toggle="tab" href="#blue">Blue</a>
        </li>
    </ul>

    <div class="tab-content" id="my-tab-content">
        <div class="tab-pane active" id="red">
            <ul class="nav nav-tabs" data-tabs="tabs" id="tabs2">
                <li class="active">
                    <a data-toggle="tab" href="#red2">Red2</a>
                </li>

                <li>
                    <a data-toggle="tab" href="#orange2">Orange2</a>
                </li>

                <li>
                    <a data-toggle="tab" href="#yellow2">Yellow2</a>
                </li>

                <li>
                    <a data-toggle="tab" href="#green2">Green2</a>
                </li>

                <li>
                    <a data-toggle="tab" href="#blue2">Blue2</a>
                </li>


            </ul>

                    <div class="tab-content" id="my-tab-content">
                        <div class="tab-pane active" id="red2">
                            RED 2
                        </div>

                        <div class="tab-pane" id="orange2">
                            ORANGE 2
                        </div>
                    </div>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>

            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>

            <p>yellow yellow yellow yellow yellow</p>
        </div>

        <div class="tab-pane" id="green">
            <h1>Green</h1>

            <p>green green green green green</p>
        </div>

        <div class="tab-pane" id="blue">
            <h1>Blue</h1>

            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>

Answer 1

It's a little difficult to understand what exactly you are trying to accomplish, but I believe this jsbin example implements the behavior you are after.

https://output.jsbin.com/wotowamuri/1

Please note that in the source code you posted in your original question, you have two div elements with the same id.

<div class="tab-content" id="my-tab-content">

That is bound to cause problems of one sort or another. In the jsbin example, I have changed the id name of the inner div.

<div class="tab-content" id="my-tab-content-2">