Tabs | Vanilla

Usage

Create a parent <div> with a class of dk-tabbed-menu, add a data-tab-menu-id attribute with an unique id.
Inside the parent div create an <ul> with an attribute name of data-tab-menu. This will be the ID of the tab menu. If there are multiple tabbed menus on a page each one needs a unique ID.
The tabs will automatically move into a tab overflow dropdown if they don't all fit. By default this overflow panel will use the label "More" but that can be overriden with a data-overflow-text attribute on the dk-tabbed-menu div.
Inside the ul give each list item a class of dk-tab-item. This will add the styles to create the tabs. For each list item add the attribute name of data-tab-item and give them a unique ID.
Inside the parent div, but after the ul we will create another DIV and add the class of dk-tab-container. Also add an attribute name of data-tab-menu that matches the value added to the ul. Inside this div add the same amount of divs as list items previously created.
For each child div inside of the "dk-tab-container" give an attribute name of data-tab-item that matches the value of the corresponding li that it should be connected with.
Javascript is used to start and manage the tabbed menus. In order to start it simply call the dk.TabbedMenu() function after the page is fully loaded to started all of the tabbed menus on the page.
- Note: By default the first tab will be selected as active. If a different tab needs to start open then add the class "active" to the li and to the div with the class "dk-tab-content" that should be open.

Notes:

It's possible to set what tab should be open by using a query parameter in the url
- parameter structure: ?DATA_TAB_MENU_ID="DATA_TAB_ITEM"
Tab buttons are wrapped in a div with the class of dk-tab__list and has the role tablist as well as an aria-label that is unique to the tabbed sidebar
All Tab Buttons:
- Unique ID
- Class of dk-tab__item
- Role of tab: role="tab" One
- The aria-controls is set the the ID of the tab panel it should open
All Tab Panels:
- Unique ID
- Class of dk-tab__panel
- Role of tabpanel: role="tabpanel"
- aria-labelledby is the ID of the button that should open the panel
On a smaller screen the javascript will move the markup around so that it works as an accordion. It's important that the markup is setup like the desktop version.

Javascript:

To start the javascript required for this component you have to call the following function. All of the normal ways you can interact with JS components from global apply.

If you pass no arguments it will init all of the components that match the default classes.
If you want to init just one or a couple you can pass a string with a query selector and the script will init those tabbed sidebars.
You can also pass a NodeList and the script will init just those tabbed sidebars.

Tabbed Menu

<div
        class="dk-tabbed-menu"
        data-tab-menu-id="tabbedMenuID"
        style="max-width:500px">
        <ul class="dk-tab-list">
            <li
                data-tab-item="1"
                class="dk-tab-item">
                Active Section
            </li>
            <li
                data-tab-item="2"
                class="dk-tab-item active">
                Item Two
            </li>
            <li
                data-tab-item="3"
                class="dk-tab-item">
                Item Three
            </li>
        </ul>
        <div class="dk-tab-container">
            <div
                data-tab-item="1"
                class="dk-tab-content">
                <p>Content Goes Here</p>
            </div>
            <div
                data-tab-item="2"
                class="dk-tab-content active">
                <p>Second Content Goes Here</p>
            </div>
            <div
                data-tab-item="3"
                class="dk-tab-content">
                <p>Third Content Goes Here</p>
            </div>
        </div>
    </div>

Javascript

dk => dk.tabbedMenu()

Tabbed Sidebar

<div class="dk-tabbed-sidebar">
        <div
            class="dk-tab__list"
            role="tablist"
            aria-label="tabbedMenuID">
            <button
                class="dk-tab__item"
                role="tab"
                aria-selected="true"
                aria-controls="tab1-panel"
                id="tab1">
                Active Section
            </button>
            <button
                class="dk-tab__item"
                role="tab"
                aria-controls="tab2-panel"
                id="tab2">
                Second Tab
            </button>
            <button
                class="dk-tab__item"
                role="tab"
                aria-controls="tab3-panel"
                id="tab3">
                Third Tab
            </button>
        </div>
        <div
            id="tab1-panel"
            class="dk-tab__panel"
            role="tabpanel"
            aria-labelledby="tab1">
            <p>Tab 2 content</p>
            <p>
                Lorem ipsum dolor sit amet
                consectetur adipisicing elit.
                Officia similique quod vitae fuga
                inventore facilis eum delectus
                dicta aliquid sunt! Et quasi
                voluptates atque iure eveniet
                ipsam reiciendis sint officia,
                quis labore corrupti eaque
                accusamus quaerat, sed ab,
                repellendus praesentium.
            </p>
        </div>
        <div
            id="tab2-panel"
            class="dk-tab__panel"
            role="tabpanel"
            aria-labelledby="tab2">
            <p>Content Goes Here 2</p>
            <p>
                Lorem ipsum dolor sit amet
                consectetur adipisicing elit.
                Temporibus, sapiente. Lorem ipsum,
                dolor sit amet consectetur
                adipisicing elit. Non repellendus
                reprehenderit in rem neque
                explicabo, recusandae quibusdam
                illo ullam quam labore. Dolor
                accusamus voluptatem reiciendis
                ducimus facilis aut repellat
                deleniti.
            </p>
        </div>
        <div
            id="tab3-panel"
            class="dk-tab__panel"
            role="tabpanel"
            aria-labelledby="tab3">
            <p>
                Content for tab 3 Goes Here Lorem
                ipsum dolor, sit amet consectetur
                adipisicing elit. Ut quibusdam a
                nemo, et amet deserunt dolore
                maiores saepe doloremque vitae. Ea
                similique illo blanditiis, id
                consequatur molestiae totam
                doloribus dignissimos ad illum
                consectetur assumenda quod labore
                iusto sint enim numquam. Dolor
                unde eaque, quasi distinctio ut
                voluptatem ipsam sapiente optio.
                Lorem ipsum dolor sit amet
                consectetur adipisicing elit.
                Doloribus mollitia possimus amet
                voluptatem recusandae consectetur,
                aliquam sequi vero molestias
                provident iste vel delectus quae
                beatae, numquam distinctio illum
                voluptates, unde facere tempora
                sunt? Nam nostrum, illum accusamus
                sint dolorem earum tempore esse
                sunt quidem?
            </p>
        </div>
    </div>

Javascript

dk => dk.tabbedSidebar()