js-izzi-tabs v1.0.0

IzziTabs

A lightweight and simple plugin to have sticky stuff.

#Install

Using npm command, it’s as simple as this :

npm i -D js-izzi-tabs

If you use bower, you can just do

$ bower i js-izzi-tabs

Or you could just download the files on GitHub.

How to use

var izziTabs = new IzziTabs('.js-izzi-tabs');

You can pass either a html object, or a selector in a string.

Then, you should have a markup similar to this:

<nav class="tab-links js-izzi-tabs">
	<a href="#tab1" class="tab-links__item is-active">tab1</a>
	<a href="#tab2" class="tab-links__item">tab2</a>
	<a href="#tab3" class="tab-links__item">tab3</a>
	<a href="#tab4" class="tab-links__item">tab4</a>
</nav>

<div class="tab-content">
	<div class="tab-content__item is-active" id="tab1">
		<!-- -->
	</div>

	<div class="tab-content__item" id="tab2">
		<!-- -->
	</div>

	<div class="tab-content__item" id="tab3">
		<!-- -->
	</div>

	<div class="tab-content__item" id="tab4">
		<!-- -->
	</div>
</div>

The plugin work with a simple anchor system.

Check the demo files for an example.

Options

You can also pass options to the plugin to change it’s default settings, like this:

var izziTabs = new IzziTabs('.js-izzi-tabs', {
	tabLinkSelector: 'tab-link',
	tabLinkActiveClass: 'tab-link--active',
	afterShowTab: function () {
		console.log('after show');
	}
});

TODO

• Add possibility to easily animate the tab panel