Tabs

• Installation
• Overview
• Settings
• On and Off
• Icon rotate
• Methods

Installation

Tabs requires the following dependencies:

• jQuery
• my-tabs.js

Overview

    <nav>
        <a href="#" my-tab="foo" class="my-btn">Foo</a>
        <a href="#" my-tab="bar" class="my-btn">Bar</a>
        <a href="#" my-tab="foobar" class="my-btn">Foobar</a>
        <a href="#" my-tab="empty" class="my-btn">Empty tab</a>
    </nav>
    <div class="my-tabs">
        <div my-tab-name="foo" class="active">Foo tab<br> <a href="#" my-tab="bar">Next</a></div>
        <div my-tab-name="bar">Bar tab<br> <a href="#" my-tab="foo">Previous</a> <a href="#" my-tab="foobar">Next</a></div>
        <div my-tab-name="foobar">Foobar tab<br> <a href="#" my-tab="bar">Previous</a></div>
        <div my-tab-name="empty"> </div>
    </div>

Settings

my-tabs.js contains myTab.options object with all default settings:

Global parameter	Type	Description
autoHide	boolean	Hide trigger if target tab is empty
toggleMode	boolean	Toggle show/hide the tab even if active

On and Off

.mod-on and .mod-off classes into [my-tab] elements are used to show/hide any elements.

    <nav>
        <a href="#" my-tab="foo" class="my-btn">Foo <span class="mod-on">(opened)</span> <span class="mod-off">(closed)</span></a>
        <a href="#" my-tab="bar" class="my-btn">Bar <span class="mod-on">(opened)</span> <span class="mod-off">(closed)</span></a>
        <a href="#" my-tab="foobar" class="my-btn">Foobar <span class="mod-on">(opened)</span> <span class="mod-off">(closed)</span></a>
    </nav>
    <div class="my-tabs">
        <div my-tab-name="foo" class="active">Foo tab<br> <a href="#" my-tab="bar">Next</a></div>
        <div my-tab-name="bar">Bar tab<br> <a href="#" my-tab="foo">Previous</a> <a href="#" my-tab="foobar">Next</a></div>
        <div my-tab-name="foobar">Foobar tab<br> <a href="#" my-tab="bar">Previous</a></div>
    </div>

Icon rotate

.my-toggle-options attribute can contain tabs options. Adding icon-rotate into .my-toggle-options attribute automatically rotate icons included into the trigger [tab-name].

    <nav>
        <a href="#" my-tab="foo" my-tab-options="icon-rotate" class="my-btn">Foo <span class="icon-chevron-down"></span></a>
        <a href="#" my-tab="bar" my-tab-options="icon-rotate" class="my-btn">Bar <span class="icon-chevron-down"></span></a>
        <a href="#" my-tab="foobar" my-tab-options="icon-rotate" class="my-btn">Foobar <span class="icon-chevron-down"></span></a>
    </nav>
    <div class="my-tabs">
        <div my-tab-name="foo" class="active">Foo tab<br> <a href="#" my-tab="bar">Next</a></div>
        <div my-tab-name="bar">Bar tab<br> <a href="#" my-tab="foo">Previous</a> <a href="#" my-tab="foobar">Next</a></div>
        <div my-tab-name="foobar">Foobar tab<br> <a href="#" my-tab="bar">Previous</a></div>
    </div>

Methods

myTab.update();
// Start and refresh if DOM changed.

myTab.open(id);
// Where `id` is a string. Opens the specified tab name.

    <button class="my-btn" onclick="myTab.open('foo')">Foo</button>
    <button class="my-btn" onclick="myTab.open('bar')">Bar</button>
    <button class="my-btn" onclick="myTab.open('foobar')">Foobar</button>
    <div class="my-tabs">
        <div my-tab-name="foo" class="active">Foo tab</div>
        <div my-tab-name="bar">Bar tab</div>
        <div my-tab-name="foobar">Foobar tab</div>
    </div>