@wearediagram/wsol.tabs

Tabs

Content tabs that toggle content when clicked.

Installation

Install via Bower:

$ bower install websolutions/tabs --save

Usage

The most basic example follows this DOM structure:

<div class="tabs">
  <ul class="tab-navigation">
    <li class="selected">
      <a href="#tab1">Tab Title 1</a>
    </li>
    <li>
      <a href="#tab2">Tab Title 2</a>
    </li>
  </ul>
  <div class="tab-container">
    <div id="tab1">
      <h3>Tab Title 1</h3>
      <p>Tab Content 1</p>
    </div>
    <div id="tab2" class="hidden">
      <h3>Tab Title 2</h3>
      <p>Tab Content 2</p>
    </div>
  </div>
</div>

And is initialized like so:

$(".tabs").wsol_tabs();

The plugin can also be removed afterwards:

$(".tabs").data("wsol.tabs").destroy();

Or manually changed to a specific tab (index or ID):

$(".tabs").data("wsol.tabs").changeTab(0);

Configuring

The jQuery plugin supports a number of configuration options:

Option	Type	Description	Default
navigationLinkSelector	String	Selector for tab navigation links	> .tab-navigation > li > a
containerSelector	String	Selector for tab containers	> .tab-container > div
selectedClass	String	Class name to apply to the selected tab link	selected
hiddenClass	String	Class name to apply to non-selected tabs	hidden
accordionHiddenClass	String	Class name to apply to non-selected accordions	accordion-hidden
autoScroll	Boolean	Keep active tab/accordion in viewport on change	true