Tabs

Uses this plugin https://github.com/jellekralt/Responsive-Tabs. See plugin docs for advanced usage.

Use the structure outlined below. The data attribute data-responsive-tabs is what initiates the tab behavior. The href attribute of each tab must be the id of the panel you want it to control.

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5

Tab 1 Content

Tab 2 Content

Tab 3 Content

Tab 4 Content

Tab 5 Content

<div class="bpTabs" data-responsive-tabs>
  <ul class="bpTabs-nav  o-pack  u-txtCenter">
    <li class="bpTabs-tab   o-pack-item">
      <a href="#1" class="bpTabs-anchor">Tab 1</a>
    </li>
    <li class="bpTabs-tab   o-pack-item">
      <a href="#2" class="bpTabs-anchor">Tab 2</a>
    </li>
    <li class="bpTabs-tab   o-pack-item">
      <a href="#3" class="bpTabs-anchor">Tab 3</a>
    </li>
    <li class="bpTabs-tab   o-pack-item">
      <a href="#4" class="bpTabs-anchor">Tab 4</a>
    </li>
    <li class="bpTabs-tab   o-pack-item">
      <a href="#5" class="bpTabs-anchor">Tab 5</a>
    </li>
  </ul>

  <div id="1" class="bpTabs-panel">Tab 1 Content</div>
  <div id="2" class="bpTabs-panel">Tab 2 Content</div>
  <div id="3" class="bpTabs-panel">Tab 3 Content</div>
  <div id="4" class="bpTabs-panel">Tab 4 Content</div>
  <div id="5" class="bpTabs-panel">Tab 5 Content</div>
</div>