Bootstrap Pills in Pills in Pills

Question

Here's a link to the JSFiddle i'm currently working on. http://jsfiddle.net/PhoenixOfBlades/3bry9Lo8/6/

I feel like i've scoured the web for answers. I've found lots of questions from people who were confused about nesting Pills/Tabs but never with this many. I'm about this close to solving my issue but this last bit has me completely stumped.

I'm trying to create Pills inside of Pills inside of Pills inside of Pills for greater data organization in an interface. Currently I've got my Age Pills inside of my Canon Pills behaving exactly the way that I want them. And now I want to put my World Pills inside of my Age Pills but for some reason they act the same as my Age Pills and seem to be inside of my Canon Pills. I've tried learning more about Bootstrap as I suspect it may be a syntax issue of some kind but I haven't been able to find anything about Bootstrap's pills except for some code snippets. Here is the code from the fiddle that i'm working with exception of some irrelevant code I commented out at the bottom of the fiddle. The comment notes inside direct you to the section of the code dealing with the World Pills.

If someone could tell me how to put the World Pills inside of the Age Pills instead of the Canon Pills or explain to me why they are behaving this way I'd be very grateful.

        <ul class="nav nav-pills nav-justified">
      <li class="active"><a href="#Canon0" data-toggle="pill">Canon 0</a></li>
            <li class=""><a href="#Canon1" data-toggle="pill">Canon 1</a></li>
            <li class=""><a href="#Canon2" data-toggle="pill">Canon 2</a></li>
            <li class=""><a href="#Canon3" data-toggle="pill">Canon 3</a></li>
            <li class=""><a href="#Canon4" data-toggle="pill">Canon 4</a></li>
            <li class=""><a href="#Canon5" data-toggle="pill">New Canon</a></li>               
        </ul>

            <div class="tab-content">
            <div id="Canon0" class="tab-pane  active">
                <h3>Section A</h3>
            <ul class="nav nav-pills nav-justified">
      <li class="active"><a href="#Canon0Age0" data-toggle="pill">Age 0</a></li>
            <li class=""><a href="#Canon0Age1" data-toggle="pill">Age 1</a></li>
            <li class=""><a href="#Canon0Age2" data-toggle="pill">Age 2</a></li>
            <li class=""><a href="#Canon0Age3" data-toggle="pill">Age 3</a></li>
            <li class=""><a href="#Canon0Age4" data-toggle="pill">Age 4</a></li>
            <li class=""><a href="#Canon0Age5" data-toggle="pill">Age 5</a></li>
        </ul>

<!--down--->

            <div class="tab-content">
            <div id="#Canon0Age0" class="tab-pane  active">
                <h3>Section 1</h3>
            <ul class="nav nav-pills nav-justified">
      <li class="active"><a href="#Canon0Age0World0" data-toggle="pill">World 0</a></li>
            <li class=""><a href="#Canon0Age0World1" data-toggle="pill">World 1</a></li>
            <li class=""><a href="#Canon0Age0World2" data-toggle="pill">World 2</a></li>
            <li class=""><a href="#Canon0Age0World3" data-toggle="pill">World 3</a></li>
            <li class=""><a href="#Canon0Age0World4" data-toggle="pill">World 4</a></li>
            <li class=""><a href="#Canon0Age0World5" data-toggle="pill">World 5</a></li>
        </ul>
            </div>
            </div>

<!---up--->

            </div>
            <div id="Canon1" class="tab-pane">
                <h3>Section B</h3>
            <ul class="nav nav-pills nav-justified">
      <li class="active"><a href="#Canon1Age0" data-toggle="pill">Age 0</a></li>
            <li class=""><a href="#Canon1Age1" data-toggle="pill">Age 1</a></li>
            <li class=""><a href="#Canon1Age2" data-toggle="pill">Age 2</a></li>
            <li class=""><a href="#Canon1Age3" data-toggle="pill">Age 3</a></li>
            <li class=""><a href="#Canon1Age4" data-toggle="pill">Age 4</a></li>
            <li class=""><a href="#Canon1Age5" data-toggle="pill">Age 5</a></li>
        </ul>
 <!----down---->

                                <div id="#Canon0Age1" class="tab-pane">
                <h3>Section 2</h3>
            <ul class="nav nav-pills nav-justified">
      <li class="active"><a href="#Canon0Age1World0" data-toggle="pill">World 0</a></li>
            <li class=""><a href="#Canon0Age1World1" data-toggle="pill">World 1</a></li>
            <li class=""><a href="#Canon0Age1World2" data-toggle="pill">World 2</a></li>
            <li class=""><a href="#Canon0Age1World3" data-toggle="pill">World 3</a></li>
            <li class=""><a href="#Canon0Age1World4" data-toggle="pill">World 4</a></li>
            <li class=""><a href="#Canon0Age1World5" data-toggle="pill">World 5</a></li>
        </ul>
            </div>

                <!-----up----->
            </div>



            <div id="Canon2" class="tab-pane">
                <h3>Section C</h3>
            <ul class="nav nav-pills nav-justified">
      <li class="active"><a href="#Canon2Age0" data-toggle="pill">Age 0</a></li>
            <li class=""><a href="#Canon2Age1" data-toggle="pill">Age 1</a></li>
            <li class=""><a href="#Canon2Age2" data-toggle="pill">Age 2</a></li>
            <li class=""><a href="#Canon2Age3" data-toggle="pill">Age 3</a></li>
            <li class=""><a href="#Canon2Age4" data-toggle="pill">Age 4</a></li>
            <li class=""><a href="#Canon2Age5" data-toggle="pill">Age 5</a></li>
        </ul>
            </div>
            <div id="Canon3" class="tab-pane">
                <h3>Section D</h3>
            <ul class="nav nav-pills nav-justified">
      <li class="active"><a href="#Canon3Age0" data-toggle="pill">Age 0</a></li>
            <li class=""><a href="#Canon3Age1" data-toggle="pill">Age 1</a></li>
            <li class=""><a href="#Canon3Age2" data-toggle="pill">Age 2</a></li>
            <li class=""><a href="#Canon3Age3" data-toggle="pill">Age 3</a></li>
            <li class=""><a href="#Canon3Age4" data-toggle="pill">Age 4</a></li>
            <li class=""><a href="#Canon3Age5" data-toggle="pill">Age 5</a></li>
        </ul>
            </div>
            <div id="Canon4" class="tab-pane">
                <h3>Section E</h3>
            <ul class="nav nav-pills nav-justified">
      <li class="active"><a href="#Canon4Age0" data-toggle="pill">Age 0</a></li>
            <li class=""><a href="#Canon4Age1" data-toggle="pill">Age 1</a></li>
            <li class=""><a href="#Canon4Age2" data-toggle="pill">Age 2</a></li>
            <li class=""><a href="#Canon4Age3" data-toggle="pill">Age 3</a></li>
            <li class=""><a href="#Canon4Age4" data-toggle="pill">Age 4</a></li>
            <li class=""><a href="#Canon4Age5" data-toggle="pill">Age 5</a></li>
        </ul>
            </div>
            <div id="Canon5" class="tab-pane">
                <h3>Section F</h3>
            <ul class="nav nav-pills nav-justified">
      <li class="active"><a href="#Canon5Age0" data-toggle="pill">Age 0</a></li>
            <li class=""><a href="#Canon5Age1" data-toggle="pill">Age 1</a></li>
            <li class=""><a href="#Canon5Age2" data-toggle="pill">Age 2</a></li>
            <li class=""><a href="#Canon5Age3" data-toggle="pill">Age 3</a></li>
            <li class=""><a href="#Canon5Age4" data-toggle="pill">Age 4</a></li>
            <li class=""><a href="#Canon5Age5" data-toggle="pill">Age 5</a></li>
        </ul>
            </div>

...On a side note this fiddle works currently but if I open a new fiddle and paste the code into it then it only appears as an unordered list. Why is that? Is it a matter of settings?

Thankyou ioneyed for answering the bonus question ^_^ I'm no longer ignorant of the External Resources tab in which I had bootstrap.min.css and bootstrap.min.js

Answer 1

I am not sure if this completely answers your questions. Let me know and I can revise it...

But I assume you want to nest objects. Pills cannot be nested like that in bootstrap. However you could nest pills inside of a drop down.

Please see attached jsfiddle: http://jsfiddle.net/u6Lczfz6/

Code:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Age 0
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <ul class="nav nav-pills nav-stacked">
            <li role="presentation" class="active"><a href="#">World 0</a></li>
            <li><a href="#">World 1</a></li>
            <li><a href="#">World 2</a></li>
            <li><a href="#">etc...</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Age 1
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        <ul class="nav nav-pills nav-stacked">        
            <li role="presentation" class="active"><a href="#">World 0</a></li>
            <li><a href="#">World 1</a></li>
            <li><a href="#">World 2</a></li>
            <li><a href="#">etc...</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          etc..
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        <ul class="nav nav-pills nav-stacked">         
            <li role="presentation" class="active"><a href="#">World 0</a></li>
            <li><a href="#">World 1</a></li>
            <li><a href="#">World 2</a></li>
            <li><a href="#">etc...</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>