Tab Controls

Additional navigation allowing the use to change what is being displayed in the content area below.

Tab controls

    
      <nav role="navigation" aria-label="Page">
      <div class="nav atp-tabs" id="exampleTabControls1" role="tablist">
          <a class="nav-item nav-link" id="firstTab-tab" data-toggle="tab" href="#firstTab" role="tab" aria-controls="firstTab" aria-selected="false">First Tab</a>
          <a class="nav-item nav-link active" id="secondTab-tab" data-toggle="tab" href="#secondTab" role="tab" aria-controls="secondTab" aria-selected="true">Second Tab</a>
          <a class="nav-item nav-link" id="thirdTab-tab" data-toggle="tab" href="#thirdTab" role="tab" aria-controls="thirdTab" aria-selected="false">Third Tab</a>
      </div>
  </nav>

Tab controls with content areas

View in new window

    
      <nav role="navigation" aria-label="Page">
      <div class="nav atp-tabs" id="exampleTabControls2" role="tablist">
          <a class="nav-item nav-link" id="firstTab-tab" data-toggle="tab" href="#firstTab" role="tab" aria-controls="firstTab" aria-selected="false">First Tab</a>
          <a class="nav-item nav-link active" id="secondTab-tab" data-toggle="tab" href="#secondTab" role="tab" aria-controls="secondTab" aria-selected="true">Second Tab</a>
          <a class="nav-item nav-link" id="thirdTab-tab" data-toggle="tab" href="#thirdTab" role="tab" aria-controls="thirdTab" aria-selected="false">Third Tab</a>
      </div>
  </nav>
  <br>
  <!-- Content area located somewhere in the DOM -->
  <div class="tab-content" id="pageTabsContent">
  <div class="tab-pane" id="firstTab" role="tabpanel" aria-labelledby="firstTab-tab">
    First Tab Content
  </div>
  <div class="tab-pane show active" id="secondTab" role="tabpanel" aria-labelledby="secondTab-tab">
    Second Tab Content
  </div>
  <div class="tab-pane" id="thirdTab" role="tabpanel" aria-labelledby="thirdTab-tab">
    Third Tab Content
  </div>
  </div>