kist-tabify

Simple tabs and accordion interface.

Installation

npm install kist-tabify --save

bower install kist-tabify --save

API

$Element.tabify([options], [placement])

Returns: jQuery

Element is container for tabs and corresponding panes. If panes can’t be found inside element, plugin will search for them outside container, beginning with body element.

options

Type: Object|String

Options defined as Object

type

Type: String
Default: tab

Type of tabbing interface. It can be either tab or accordion.

initial

See placement.

multiSelect

Type: Boolean
Default: false

If it’s accordion interface, determines if multi tab selection is allowed.

tab

Type: String
Default: > ul > li > a, > ul > li > button

Selector used to collect all tab toggler elements.

pane

Type: String
Default: > div > div

Selector used to collect all tab pane elements.

changeURL

Type: Boolean
Default: false

If tab toggler elements are anchor elements, determines if URL should be update with href value.

select

Type: Function
Arguments: [Tab], [Pane] Event: tabifyselect

Callback to run on tab selection.

deselect

Type: Function
Arguments: [Tab], [Pane] Event: tabifydeselect

Callback to run on tab deselection.

create

Type: Function
Arguments: [Tab], [Pane] Event: tabifycreate

Callback to run on tab instance creation.

Options defined as String

Type: String

destroy

Destroy plugin instance.

next

Move to next tab element.

prev

Move to previous tab element.

move

Move to tab element determined by second argument. Second argument accepts values like options → initial.

placement

Type: Integer|String|Function|Boolean
Default: 1

Initial element to select.

If defined as:

| Type | Description | | --- | --- | | Integer | Index of tab element to activate. | | String | Value of id attribute, data-tab-id attribute or href attribute value of tab element to activate. | | Function | Should return either index or string which correspond to integer and string values for this property. | | Boolean | If true, it will active first tab element, else it won’t activate anything. |

Examples

Default structure for tab interface.

<div class="Tab">
	<ul class="Tab-items">
		<li class="Tab-item"><a href="#tab1" class="Tab-toggler">Tab 1</a></li>
		<li class="Tab-item"><a href="#tab2" class="Tab-toggler">Tab 2</a></li>
		<li class="Tab-item"><a href="#tab3" class="Tab-toggler">Tab 3</a></li>
	</ul>
	<div class="Tab-panes">
		<div class="Tab-pane Tab-pane--1" id="tab1">
			<p>Pane 1</p>
		</div>
		<div class="Tab-pane Tab-pane--2" id="tab2">
			<p>Pane 2</p>
		</div>
		<div class="Tab-pane Tab-pane--3" id="tab3">
			<p>Pane 3</p>
		</div>
	</div>
</div>

Setup tab instance.

$('.Tab').tabify({
	type: 'tab',
	initial: 1,
	tab: '.Tab-toggler',
	pane: '.Tab-pane',
	namespace: 'Foobar',
	select: function ( tab, pane ) {
		// I’m selected!
	},
	deselect: function ( tab, pane ) {
		// I’m deselected!
	},
	create: function ( tab, pane ) {
		// I’m created!
	}
});

Move to next/previous tab.

$('.Tab').tabify('prev');
$('.Tab').tabify('next');

Move to arbitrary tab.

$('.Tab').tabify('move', 1);
$('.Tab').tabify('move', 'foo');

Destroy plugin instance.

$('.Tab').tabify('destroy');

Browser support

Tested in IE8+ and all modern browsers.

License

MIT © Ivan Nikolić