Tabs

Tabs can be used to switch the content of an element on click.

<ul class="my-tab-links">
    <a class="my-tab-link" href="#tc3" stim-tab>Contact</a>
    <a class="my-tab-link" href="#tc3" stim-tab>Contact</a>
</ul>
<div class="my-tab-contents">
    <div class="my-tab-pane" id="tc1">Tab content 1</div>
    <div class="my-tab-pane" id="tc2">Tab content 2</div>
    <div class="my-tab-pane" id="tc3">Tab content 3</div>
</div>

All switchable elements should have a common parent, and an id attribute that is unique on the page.

The clickable links should have the stim-tab attribute, and their href should point to the id-anchor of the content element.

When a tab link is clicked, all other elements under the common parent will be hidden, and only the corresponding content element will be made visible.

Styling

When switching between tabs, the content style will be toggled between display: block and display: none by Stim.js automatically.

Active tabs and active content elements will get the stim-active attribute, which allows you to apply custom styles as desired:

.my-tab-link[stim-active] {
    font-weight: bold;
    color: blue;
}

.my-tab-pane[stim-active] {
    display: flex !important;
}

API

Update all components

Stim.Tabs.update();

This normally happens on page (re)load; all elements on the page with stim-tab are evaluated and bound as needed.