Submit your widget

Super Cool Responsive tab

Created 2 years ago   Views 13218   downloads 5354    Author callmenick
Super Cool Responsive tab
View DemoDownload 694.8 KB
26
Share |

Responsive tab layout with JavaScript and CSS.

Usage

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

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

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

Read more:https://github.com/callmenick/responsive-tabs

Tag: tabs