Author: | callmenick |
---|---|
Views Total: | 5,717 views |
Official Page: | Go to website |
Last Update: | November 18, 2019 |
License: | MIT |
Preview:

Description:
A responsive, minimal, clean tabs component that falls back to a linear content display when JavaScript is disabled.
How to use it:
1. Build the HTML for the tabs component.
<div id="tabs" class="c-tabs no-js"> <div class="c-tabs-nav"> <a href="#" class="c-tabs-nav__link is-active"></a> <a href="#" class="c-tabs-nav__link"></a> ... </div> <div class="c-tab is-active"> <div class="c-tab__content"></div> </div> <div class="c-tab"> <div class="c-tab__content"></div> </div> ... </div>
2. Insert the JavaScript file tabs.js
into the html document.
<script src="js/src/tabs.js"></script>
3. Create a new tabs instance.
var myTabs = tabs({ el: '#tabs', tabNavigationLinks: '.c-tabs-nav__link', tabContentContainers: '.c-tab' });
4. Initialize the tabs component.
myTabs.init();
5. The example CSS styles for the tabs component.
/** * Tabs navigation */ .c-tabs-nav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; list-style: none; margin: 0; padding: 0; } .c-tabs-nav__link { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; margin-right: 4px; padding: 12px; color: #fff; background-color: #b3b3b3; text-align: center; -webkit-transition: color 0.3s; transition: color 0.3s; } .c-tabs-nav__link:last-child { margin-right: 0; } .c-tabs-nav__link:hover { color: #6d6d6d; } .c-tabs-nav__link.is-active { color: #dc446e; background-color: #e7e7e7; } .c-tabs-nav__link i, .c-tabs-nav__link span { margin: 0; padding: 0; line-height: 1; } .c-tabs-nav__link i { font-size: 18px; } .c-tabs-nav__link span { display: none; font-size: 18px; } @media all and (min-width: 720px) { .c-tabs-nav__link i { margin-bottom: 12px; font-size: 22px; } .c-tabs-nav__link span { display: block; } } /** * Tab */ .c-tab { display: none; background-color: #e7e7e7; } .c-tab.is-active { display: block; } .c-tab__content { padding: 1.5rem; } /** * Tabs no-js fallback */ .c-tabs.no-js .c-tabs-nav { display: none; } .c-tabs.no-js .c-tab { display: block; margin-bottom: 1.5rem; } .c-tabs.no-js .c-tab:last-child { margin-bottom: 0; }