Simple Tabs jQuery plugin

jQuery plugin for quick and easy tab creation. Does not require initialization, works immediately after DOM is ready, uses on (live) events, so it will work on dynamically generated pages.

Tabs are assigned to a group and id (to be able to place several different groups of tabs on a page even if their ids overlap).

Demo

http://psnet.github.io/simple_tabs/demo/

Code from demo:

<div class="tabs">
	<a href="#" class="js-simple-tab active" data-tab-group="example" data-tab-id="1">Tab 1</a>
	<a href="#" class="js-simple-tab" data-tab-group="example" data-tab-id="2">Tab 2</a>
	<a href="#" class="js-simple-tab" data-tab-group="example" data-tab-id="3">Tab 3</a>
</div>

<div class="content">
	<div class="js-simple-tab-content" data-tab-group="example" data-tab-id="1">
		Tab 1 content goes here
	</div>
	<div class="js-simple-tab-content d-n" data-tab-group="example" data-tab-id="2">
		Tab 2 content goes here
	</div>
	<div class="js-simple-tab-content d-n" data-tab-group="example" data-tab-id="3">
		Tab 3 content goes here
	</div>
</div>

Connection

• Connect jQuery
• Connect plugin
• Create html code according to the instructions below or use the example code from the demo

Instructions for use

• The tab must contain the class "js-simple-tab" and the attributes "data-tab-group" and "data-tab-id":

<a href="#" class="js-simple-tab" data-tab-group="example" data-tab-id="1">Tab 1</a>

• The container associated with a tab must have the class "js-simple-tab-content" and also contain the attributes "data-tab-group" and "data-tab-id" with the same values ​​as its tab:

<div class="js-simple-tab-content" data-tab-group="example" data-tab-id="1">
	Here is the content for tab 1
</div>

• The default open tab should contain the class "active", the content of this tab should be visible. The rest of the content of other tabs should be hidden by CSS (display: none;).

License

(P) PSNet 2014

Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)