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 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>
Copy Code