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.
<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>