Tab Module

Purpose

The tab module is used to display different panes of information in one area. Content in tabs should have some sort of relation (ie. each tab is used to target a specific audience).

Markup

• The markup for the tab module will contain an unordered list to hold the tabs, and a content div associated with each tab. The href of the tab link must match the tab pane ID. The tab pane ID should be a unique value so it does not conflict if there is more than one tab module on a page.

      <ul class="nav nav-tabs"> <!-- Tabs Start -->
        <li class="active">
          <a href="#tab-one" data-toggle="tab">Tab One</a>
        </li>
        <li>
          <a href="#tab-two" data-toggle="tab">Tab Two</a>
        </li>
      </ul> <!-- Tabs End -->
      <div class="tab-content"> <!-- Tab Content Start -->
       <div class="tab-pane active" id="tab-one">
           <p>Tab one content</p>
       </div> 
       <div class="tab-pane" id="tab-two">
           <p>Tab two content</p>
       </div>
      </div> <!-- End Tab Content -->
  

Styling

• Tabs should appear on top of the tab content, and have a similar appearance to the .extrude class

Functionality / Javascript

• This module will use tabs plugin built in to Bootstrap