Tabs

Simple tabs management

Tabs replaces class attributes according to the triggers my-tab="..." that are clicked. Class names replaced are set into default options that can be overridden for each panel group instance.

Element Attribute  Definition
pane my-tab-name="ID"  An HTML element that contains the target content of the tab. ID Must be unique.
panel group - Any HTML element containing multiple panes that are direct child of it
tab/trigger my-tab="ID"  An HTML element that triggers the opening of the tab. Multiple tabs for same pane is supported

Installation

Tabs requires the following files:

<body>
    <!-- Just before </body> -->
    <script src="/path/to/my-tabs-options.js"></script>
    <script src="/path/to/my-tabs-native.js"></script>
</body>

Overview

Just set the initial state classes on triggers and panes according to their settings.

    <nav>
        <a href="#" my-tab="foo" class="c-btn m-skin-tab-active">Foo</a>
        <a href="#" my-tab="bar" class="c-btn m-skin-tab">Bar</a>
        <a href="#" my-tab="foobar" class="c-btn m-skin-tab">Foobar</a>
    </nav>
    <div>
        <div my-tab-name="foo">
            <h2>Foo tab content</h2>
        </div>
        <div my-tab-name="bar" class="u-d-none">
            <h2>Bar tab content</h2>
        </div>
        <div my-tab-name="foobar" class="u-d-none">
            <h2>Foobar tab content</h2>
            <nav>
                <a href="#" my-tab="sub-foo" class="c-btn m-skin-tab-active">Sub-tab 1</a>
                <a href="#" my-tab="sub-bar" class="c-btn m-skin-tab">Sub-tab 2</a>
                <a href="#" my-tab="sub-foobar" class="c-btn m-skin-tab">Sub-tab 3</a>
            </nav>
            <div>
                <div my-tab-name="sub-foo">Sub-tab 1 content</div>
                <div my-tab-name="sub-bar" class="u-d-none">Sub-tab 2 content</div>
                <div my-tab-name="sub-foobar" class="u-d-none">Sub-tab 3 content</div>
            </div>
        </div>
    </div>
    <!-- DEMO ONLY -->
    <style>
        body { padding: 3em }
        [my-tab-name] {
            padding: 2em;
            border: 1px dotted black;
        }
    </style>

Settings

Add your own settings into the dedicated file my-tabs-options.js. Call your own parameters through the custom HTML attribute my-tabs-options="NAME_OF_YOUR_OPTIONS"

The following example is the same as the overview but with custom options set called name1.

    <nav>
        <a href="#" my-tab="foo" class="c-txt m-ellipsis c-dim m-fw-content c-btn m-skin-tab-active u-pl-0 u-pr-0">Foo</a>
        <a href="#" my-tab="bar" class="c-txt m-ellipsis c-dim m-fw-content c-btn m-skin-tab u-pl-0 u-pr-0">Bar</a>
        <a href="#" my-tab="foobar" class="c-txt m-ellipsis c-dim m-fw-content c-btn m-skin-tab u-pl-0 u-pr-0">Foobar</a>
    </nav>
    <div my-tabs-options="faq">
        <div my-tab-name="foo">Foo tab with custom settings called "faq"</div>
        <div my-tab-name="bar" class="u-d-none">Bar tab with custom settings called "faq"</div>
        <div my-tab-name="foobar" class="u-d-none">Foobar tab with custom settings called "faq"</div>
    </div>
    <!-- DEMO ONLY -->
    <style>
        body { padding: 3em }
        nav {
            display: flex;
            gap: 32px;
        }
        [my-tabs-options="faq"] {
            padding-top: 2em;
        }
    </style>
Parameter Description
paneDefaultClass Inactive pane class attribute
paneActiveClass Active pane class attribute
tabDefaultClass Inactive tabs/triggers class attribute
tabActiveClass Active tabs/triggers class attribute

Example of custom settings called name1:

    let myTabsOptions = {
        name1: {
            paneDefaultClass: 'u-d-none',
            paneActiveClass: '',
            tabDefaultClass: '',
            tabActiveClass: ''
        }
        //... Just add your own sets
    }

Methods

Tabs comes with methods that can be called through myTabs object :

Method name Arguments Description
myTabs.update() no Build/refresh instances of all tabs, invoked at start
myTabs.open() string Opens the specified tab id, for example myTabs.open('foo')