Tabpanel JS

import Tabpanel from "@natachah/vanilla-frontend/js/_tabpanel"

Syntax

The tabpanel component make you able to make some elements visible by some <button>.

The button must have an aria-controls="IdOfElement", an aria-expanded and a aria-pressed attributes.

html

<div id="myPanel">
    <div role="tablist" aria-label="My demo tabpanel">
        <button id="tab-1" role="tab" aria-controls="one">One</button>
        <button id="tab-2" role="tab" aria-controls="two">Two</button>
    </div>
    <div id="one" role="tabpanel" aria-labelledby="tab-1">
        This is the first panel
    </div>
    <div id="two" role="tabpanel" aria-labelledby="tab-2">
        This is the seconde panel
    </div>
</div>

js

import Tabpanel from '@natachah/vanilla-frontend/js/_tabpanel.js'
const tabpanel = document.getElementById('myPanel')
if (tabpanel) new Tabpanel(tabpanel)

Javascript

Events

Event name	Description	Value
tabpanel:changed	This event is fired when the panel as been changed	current as a HTMLElement of the current button

const myPanel = document.getElementById('myPanel')

myPanel.addEventListener('tabpanel:changed', (e) => {
    const thecurrentButton = e.detail.current
    console.log('It has changed !')
})