Skip to content
Dimitris Krestos edited this page Jan 7, 2016 · 16 revisions

Table of Contents

Setup instructions

Include jQuery at your document's footer

<script type="text/javascript" src="jquery-2.0.2.min.js">

Include Tabslet

<script type="text/javascript" src="jquery.tabslet.min.js">

Create the following html structure

<div class='tabs'>
	<ul>
		<li><a href="#tab-1">Tab 1</a></li>
		<li><a href="#tab-2">Tab 2</a></li>
		<li><a href="#tab-3">Tab 3</a></li>
	</ul>
	<div id='tab-1'></div>
	<div id='tab-2'></div>
	<div id='tab-3'></div>
</div>

Initialize Tabslet using one of the following ways

Default

$(document).ready(function() {
	$('.tabs').tabslet();
});

Using a data attribute

<div class='tabs' data-toggle="tabslet">
	...
</div>