Responsive tab layout with JavaScript and CSS.
CSS JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
fonts
js
sass
.gitignore
README.md
gulpfile.js
index.html
package.json

README.md

Responsive Tabs

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>

To initialize it, make sure you run the init method:

myTabs.init();

To go to a specific tab index manually after instantiation, you can use the goToTab method which takes an index as a parameter. Example:

myTabs.goToTab(3);

No JS Fallback

Some simple CSS is provided for a no-js solution. If JS is enabled, the no-js class gets removed during instantiation and all works well!

Demo

View the live demo here.

Author

Nick Salloum nick@callmenick.com

License

MIT