Tabs
I created a custom component for tabs because I wanted some extra functionality built in. The result is a tab control that acts like a tab on large screens but transforms into an accordion on small screens. And all of that happens without having to write extra markup.
Basic usage
To start, create a container and set a data attribute of data-accordion-tabs. This will be read on page load by a piece of JavaScript code and initialized as a tab.
<div class="text-center" data-accordion-tabs>
<div class="tabs">
<ol>
<li data-tab="tab-1" class="active">Tab 1</li>
<li data-tab="tab-2">Tab 2</li>
<li data-tab="tab-3">Tab 3</li>
</ol>
</div> <!-- end .tabs -->
<div class="tab-container text-left">
<div class="tab-content active" id="tab-1">
Tab 1 content
</div> <!-- end .tab -->
<div class="tab-content" id="tab-2">
Tab 2 content
</div> <!-- end .tab -->
<div class="tab-content" id="tab-3">
Tab 3 content
</div> <!-- end .tab -->
</div> <!-- end .tab-content -->
</div> <!-- end .tabs -->
This is the basic markup for any tab control. Please note that it's important you manually set the .active class on the tab you want to highlight first as well as to the tab content.