kist-tabify

Simple tabs and accordion interface.

Installation

``sh
npm install kist-tabify --save

bower install kist-tabify --save
`

API

$3

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.

`html


`js
$('.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.

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

Move to arbitrary tab.

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

Destroy plugin instance.

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

Browser support

Tested in IE8+ and all modern browsers.

License

MIT © Ivan Nikolić