tabbed.js

JS Plugins JavaScript
On branch current
Latest: ???/cur
Running: 3292c57 (v2.1.4)
??? commits behind

JavaScript plugin for tabs.

Usage

Activate tabbed.js with new Tabbed(Element), tabbed(NodeList), or $('#tabbed').tabbed(Object) when using jQuery.

<div id="tabs-1" class="tabbed" data-animationEngine="css">
    <div class="tabs" role="tablist">
        <div class="tabs-inner">
            <button class="tab active" data-pane="pane1" role="tab">
                Title
            </button><!-- No space.
            --><button class="tab" data-pane="pane2" role="tab">
                Some Information
            </button><!-- No space.
            --><button class="tab" data-pane="pane3" role="tab">
                Last Tab
            </button>
        </div>
    </div>
    <div class="divider"><div class="highlighter"></div></div>
    <div class="panes">
        <div id="pane1" class="pane active" role="tabpanel">
          Panel 1
        </div>
        <div id="pane2" class="pane" role="tabpanel">
          Panel 2
        </div>
        <div id="pane3" class="pane" role="tabpanel">
          Panel 3
        </div>
    </div>
    <div class="buttons">
        <button class="button previous invisible" type="button">&lt; Back</button>
        <button class="button finish" type="submit">Submit</button>
        <button class="button next invisible" type="button">Next &gt;</button>
    </div>
</div>
new Tabbed(document.getElementById('tabs-1')/*, {options} */);

/* Or multiple tabs:
tabbed([a, b, c], {...})
*/

/* Or with jQuery:
$('#tabs-1').tabbed({...});
*/

Options

Pass in attributes like this:

new Tabbed(element, {
  optionName: optionValue
});

Or put them on an element as data attributes:

data-optionName="optionValue"
OptionTypeDefaultDescription
animationEngineStringgsapThe only supported engine is currently gsap. Any other value will disable animations.
animationStringslideCurrently unused.
directionStringhorizontalWhich direction to scroll the tabs. Valid values are horizontal and vertical.
placementStringaboveWhere to place the tabs. Valid values are above, left, and right.
slideSpeedNumber0.5Speed of the sliding animation.
fadeSpeedNumber0.2Speed of the fading animation.
offsetNumbernullOffset when scrolling to the top.
historyBooleanfalseWhether to enable history support.
historyTypeStringqueryValid values are query and page. Not used if history is false.
endPageWithSlashBooleantrueApplies when historyType is page.
queryVariableStringtabThe name of the query variable. Not used if historyType is not query or history is false.