Just javascript tabs. Use it anywhere. No dependencies. Lightweight. Customizable.

npm install tabit@2.2.2


Tabit! Build Status

Just javascript tabs. Use it anywhere. No dependencies. Lightweight. Customizable.

Examples: http://andrey-hohlov.github.io/tabit/


Download using NPM

$ npm install tabit --save

Prepare HTML

<div id="tabs">
    <a href="#tab-1">Tab 1</a>
    <a href="#tab-2">Tab 2</a>
    <a href="#tab-3">Tab 3</a>
  <div id="tab-1">Content of first tab</div>
  <div id="tab-2">Content of second tab</div>
  <div id="tab-3">Content of third tab</div>

Import and call

import Tabit from 'Tabit'

const element = document.getElementById('tabs');
const options = {};
const tabit = new Tabit(element, options); 

...or manually download and inject the minified script into your website.


  buttonSelector: 'a',
  contentSelector: 'div',
  buttonAttribute: 'href',
  contentAttribute: 'id', 
  buttonActiveClass: null,
  contentActiveClass: null,
  event: 'click',
  activeIndex: 0,
  toggleDisplay: true, 
  closable: false,
  beforeInit: null,
  onInit: null,
  beforeChange: null,
  onChange: null, 
  onDestroy: null
  • buttonSelector - (string) CSS selector for tab button - trigger for change tab
  • contentSelector - (string) CSS selector for tab content block
  • buttonAttribute - (string) attribute that contains a reference to the value of the contentAttribute, for href attribute will be removed first #
  • contentAttribute - (string) attribute contains the value that is referred to by buttonAttribute
  • buttonActiveClass - (string) class for active tab button
  • contentActiveClass - (string) class for active tab content block
  • event - (string | array) event or events fired on tab button, support: click, mouseover, touchstart
  • activeIndex - (number) index of active tab on init, set -1 for no active tab
  • toggleDisplay - (boolean) toggle css display property for tabs content blocks (display: none for inactive)
  • closable - (boolean) close active tab after click
  • beforeInit - (function) callback when instance created but not set active tab yet, arguments: Tabit instance
  • onInit - (function) callback after successfully init, arguments: Tabit instance
  • beforeChange - (function) callback before tab changed, arguments: current active tab, new tab, Tabit instance
  • onChange - (function) callback after tab changed, arguments: new active tab, Tabit instance
  • onDestroy - (function) callback after instance destroyed


  • next() - go to next tab, turn to first from last
  • prev() - go to previous tab, turn to last from first
  • getActiveTab() - return active tab
  • getActiveTabIndex() - return active tab index
  • getTab(index) - get tab by index
  • setActiveTab(index) - set active tab by index
  • destroy() - destroy Tabit instance
  • Tabit.getInstance(element) - get Tabit instance from element

Browser support

  • IE 10+
  • Chrome 24+
  • Firefox 23+
  • Opera 15+
  • Safari 7+
  • Android Browser 4.4+
  • iOS Safari 7.1+

Works in IE 9 with Element.prototype.classList polyfill.

Find polyfills on polyfill.io.


Custom HTML structure

    <button type="button" data-target="tab-1">Tab 1</button>
    <button type="button" data-target="tab-2">Tab 2</button>
    <button type="button" data-target="tab-3">Tab 3</button>
    <div data-content="tab-1">Content of first tab</div>
    <div data-content="tab-2">Content of second tab</div>
    <div data-content="tab-3">Content of third tab</div>
new Tabit(
    buttonSelector: '[data-target]',
    contentSelector: 'data-target',
    buttonAttribute: '[data-content]',
    contentAttribute: 'data-content',  

Only change CSS class

new Tabit(
    contentActiveClass: 'is-active',
    toggleDisplay: false
div:not(.is-active) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;

Change on hover

new Tabit(
    event: ['mouseover', 'click']

Use custom animations

new Tabit(
    toggleDisplay: false,
    onInit: function (instance) {
      this.tabs.forEach(function (item, i) {
        if (i !== 0) $(item.content).hide();
    beforeChange: function (activeTab, newTab, instance) {
      if (!activeTab) return; // no animate on init
        .fadeOut(function () {

Auto rotation

var tabit = new Tabit(document.getElementById('tabs'));
var rotate = setInterval(function() {
}, 2000)

Live examples



  • Add instance cache
  • Add getInstance method



  • Full rewrite on ES6.


The MIT License

Copyright (c) 2017 Andrey Hohlov