IzziTabs

A lightweight and simple plugin to have sticky stuff.

---

#Install

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

npm i -D izzi-tabs

If you use bower, you can just do

$ bower i izzi-tabs

Or you could just download the files on GitHub.

How to use

var izziTabs = new IzziTabs('.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 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('.izzi-tabs', {
	tabLinkSelector: 'tab-link',
	tabLinkActiveClass: 'tab-link--active',
	afterShowTab: function () {
		console.log('after show');
	}
});

Option	Default value	Type	Description
tabLinkSelector	'.tab-links__item'	string	Define a CSS selector to find your link items
tabLinkActiveClass	'is-sticky'	string	The class name to be applied to the link item you activate
tabItemSelector	'.tab-content__item'	string	Define a CSS selector to find your open tab panel
tabItemActiveClass	'is-active'	string	The class name to be applied to the panel you activate
beforeShowTab	null	function	A callback function to be called before the panel is showed
afterShowTab	null	function	A callback function to be called after the panel is showed

TODO

• Add possibility to easily animate the tab panel