Submit your widget

Super Cool Responsive tab

Created 4 years ago   Views 18654   downloads 7118    Author callmenick
Super Cool Responsive tab
View DemoDownload 694.8 KB
Share |

Responsive tab layout with JavaScript and CSS.


Markup your HTML like this:

<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 class="c-tab is-active">
    <div class="c-tab__content"></div>
  <div class="c-tab">
    <div class="c-tab__content"></div>

Include the link to the JS component and instantiate like this:

<script src="js/src/tabs.js"></script>
  var myTabs = tabs({
    el: '#tabs',
    tabNavigationLinks: '.c-tabs-nav__link',
    tabContentContainers: '.c-tab'

Read more:

Tag: tabs