Skip to main content

Tabs

    Simple Tabs

    simple1

    simple2

    simple3

    simple4

    <ul class="nav nav-tabs">
       <li role="presentation" class="active"><a href="#simple1" data-toggle="tab">simple1</a> </li>
       <li role="presentation"><a href="#simple2" data-toggle="tab">simple2</a> </li>
       <li role="presentation"><a href="#simple3" data-toggle="tab">simple3</a> </li>
       <li role="presentation"><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_1

    nested1_2

    nested1_3

    nested2

    nested3

    nested4

    nested5

    nested6

    <ul class="nav nav-tabs">
       <li role="presentation" class="active"><a href="#nested1" data-toggle="tab">nested1</a> </li>
       <li role="presentation"><a href="#nested2" data-toggle="tab">nested2</a> </li>
       <li role="presentation"><a href="#nested3" data-toggle="tab">nested3</a> </li>
       <li role="presentation"><a href="#nested4" data-toggle="tab">nested4</a> </li>
       <li role="presentation"><a href="#nested5" data-toggle="tab">nested5</a> </li>
       <li role="presentation"><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

    pills1

    pills2

    pills3

    pills4

    <ul class="nav nav-pills">
       <li role="presentation" class="active"><a href="#pills1" data-toggle="pill">simple1</a> </li>
       <li role="presentation"><a href="#pills2" data-toggle="pill">simple2</a> </li>
       <li role="presentation"><a href="#pills3" data-toggle="pill">simple3</a> </li>
       <li role="presentation"><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

    drop2

    drop3

    drop4

    <ul class="nav nav-pills">
       <li role="presentation" class="active"><a href="#drop1" data-toggle="pill">drop1</a> </li>
       <li role="presentation" 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 1
    • Item 2
    • Item 3
    • Item 4
    • Item 1
    • Item 2
    • Item 1
    • Item 1
    • Item 2
    • Item 3
    • Item 4
    • Item 5
    • Item 6
    • Item 7
    • Item 8
    • Item 9

    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="presentation">
           <a data-toggle="pill" href="#single-item">Item</a>
       </li>
       <li class="dropdown" role="presentation">
           <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>