Simple Tabs

• simple1
• simple2
• simple3
• simple4

<ul class="nav nav-tabs">
   <li role="tab"  class="active"><a href="#simple1" data-toggle="tab">simple1</a> </li>
   <li role="tab" ><a href="#simple2" data-toggle="tab">simple2</a> </li>
   <li role="tab" ><a href="#simple3" data-toggle="tab">simple3</a> </li>
   <li role="tab" ><a href="#simple4" data-toggle="tab">simple4</a> </li>
</ul>

<div class="tab-content"> 
   <div id="simple1" class="tab-pane active"> 
     <p>simple1</p>
   </div>
   <div id="simple2" class="tab-pane"> 
     <p>simple2</p>
   </div>
   <div id="simple3" class="tab-pane"> 
     <p>simple3</p>
   </div>
   <div id="simple4" class="tab-pane"> 
     <p>simple4</p>
   </div>
</div>

Nested Tabs

• nested1
• nested2
• nested3
• nested4
• nested5
• nested6

<ul class="nav nav-tabs">
   <li role="tab"  class="active"><a href="#nested1" data-toggle="tab">nested1</a> </li>
   <li role="tab" ><a href="#nested2" data-toggle="tab">nested2</a> </li>
   <li role="tab" ><a href="#nested3" data-toggle="tab">nested3</a> </li>
   <li role="tab" ><a href="#nested4" data-toggle="tab">nested4</a> </li>
   <li role="tab" ><a href="#nested5" data-toggle="tab">nested5</a> </li>
   <li role="tab" ><a href="#nested6" data-toggle="tab">nested6</a> </li>
</ul>

<div class="tab-content"> 
   <div id="nested1" class="tab-pane active"> 
     <ul class="nav nav-tabs">
       <li class="active"><a href="#nested1_1" data-toggle="tab">nested1_1</a> </li>
       <li><a href="#nested1_2" data-toggle="tab">nested1_2</a> </li>
       <li><a href="#nested1_3" data-toggle="tab">nested1_3</a> </li>
     </ul>
     
     <div class="tab-content"> 
       <div id="nested1_1" class="tab-pane active"> 
         <p>nested1_1</p>
       </div>
       <div id="nested1_2" class="tab-pane"> 
         <p>nested1_2</p>
       </div>
       <div id="nested1_3" class="tab-pane"> 
         <p>nested1_3</p>
       </div>
     </div>
   </div>
   
   <div id="nested2" class="tab-pane"> 
     <p>nested2</p>
   </div>
   <div id="nested3" class="tab-pane"> 
     <p>nested3</p>
   </div>
   <div id="nested4" class="tab-pane"> 
     <p>nested4</p>
   </div>
   <div id="nested5" class="tab-pane"> 
     <p>nested5</p>
   </div>
   <div id="nested6" class="tab-pane"> 
     <p>nested6</p>
   </div>
</div>

Simple Pills

• simple1
• simple2
• simple3
• simple4

<ul class="nav nav-pills">
   <li role="tab"  class="active"><a href="#pills1" data-toggle="pill">simple1</a> </li>
   <li role="tab" ><a href="#pills2" data-toggle="pill">simple2</a> </li>
   <li role="tab" ><a href="#pills3" data-toggle="pill">simple3</a> </li>
   <li role="tab" ><a href="#pills4" data-toggle="pill">simple4</a> </li>
</ul>

<div class="tab-content"> 
   <div id="pills1" class="tab-pane active"> 
     <p>pills1</p>
   </div>
   <div id="pills2" class="tab-pane"> 
     <p>pills2</p>
   </div>
   <div id="pills3" class="tab-pane"> 
     <p>pills3</p>
   </div>
   <div id="pills4" class="tab-pane"> 
     <p>pills4</p>
   </div>
</div>

Pill Dropdowns (the same can be done on tabs)

• drop1
• Dropdown
  • drop2
  • drop3
  • drop4

<ul class="nav nav-pills">
   <li role="tab"  class="active"><a href="#drop1" data-toggle="pill">drop1</a> </li>
   <li role="tab"  class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a>       <ul class="dropdown-menu">
       <li><a href="#drop2" data-toggle="pill">drop2</a> </li>
       <li><a href="#drop3" data-toggle="pill">drop3</a> </li>
       <li><a href="#drop4" data-toggle="pill">drop4</a> </li>
     </ul>
   </li>
</ul>

<div class="tab-content"> 
   <div id="drop1" class="tab-pane active"> 
     <p>drop1</p>
   </div>
   <div id="drop2" class="tab-pane"> 
     <p>drop2</p>
   </div>
   <div id="drop3" class="tab-pane"> 
     <p>drop3</p>
   </div>
   <div id="drop4" class="tab-pane"> 
     <p>drop4</p>
   </div>
</div>

Pill Dropdowns with Badges

• Item
• Dropdown Items
  • Item 1
  • Item 2
  • Item 3

To enable nav-pill badges, include this line within the <head>.

<script type="text/javascript" src="/fac/soc/economics/apps/pillbadge/jquery.pillbadge.min.js"></script>

For an advanced nav-pill system with dropdowns (see the tabs documentation here) place the following html and javascript within the <body>.

<ul class="nav nav-pills">
   <li class="active" role="tab" >
       <a data-toggle="pill" href="#single-item">Item</a>
   </li>
   <li class="dropdown" role="tab" >
       <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown Items <span class="caret"></span></a>
       <ul class="dropdown-menu">
           <li>
               <a data-toggle="pill" href="#drop1">Item 1</a>
           </li>
           <li>
               <a data-toggle="pill" href="#drop2">Item 2</a>
           </li>
           <li>
               <a data-toggle="pill" href="#drop3">Item 3</a>
           </li>
       </ul>
   </li>
</ul>
<div class="tab-content">
   <div class="tab-pane active" id="single-item">
       <ul>
           <li>Item 1</li>
           <li>Item 2</li>
           <li>Item 3</li>
           <li>Item 4</li>
       </ul>
   </div>
   <div class="tab-pane" id="drop1">
       <ul>
           <li>Item 1</li>
           <li>Item 2</li>
       </ul>
   </div>
   <div class="tab-pane" id="drop2">
       <ul>
           <li>Item 1</li>
       </ul>
   </div>
   <div class="tab-pane" id="drop3">
       <ul>
           <li>Item 1</li>
           <li>Item 2</li>
           <li>Item 3</li>
           <li>Item 4</li>
           <li>Item 5</li>
           <li>Item 6</li>
           <li>Item 7</li>
           <li>Item 8</li>
           <li>Item 9</li>
       </ul>
   </div>
</div>
<script type="text/javascript">
   jQuery(document).ready(function($) {
       $(".nav-pills > li").pillbadge();
   });
</script>