33 lines
868 B
JavaScript
33 lines
868 B
JavaScript
export default function Tabs( $element ) {
|
|
const $tabs = $element.querySelectorAll( '[role="tab"]' );
|
|
const $panels = $element.querySelectorAll( '[role="tabpanel"]' );
|
|
|
|
const toggleContent = function () {
|
|
if ( this.getAttribute( 'aria-selected' ) === 'false' ) {
|
|
$panels.forEach( ( item ) => {
|
|
item.setAttribute( 'hidden', true );
|
|
} );
|
|
|
|
$tabs.forEach( ( item ) => {
|
|
item.setAttribute( 'aria-selected', false );
|
|
} );
|
|
|
|
this.setAttribute( 'aria-selected', 'true' );
|
|
|
|
const currentTab = this.getAttribute( 'aria-controls' );
|
|
const tabContent = document.getElementById( currentTab );
|
|
tabContent.removeAttribute( 'hidden' );
|
|
}
|
|
};
|
|
|
|
$tabs.forEach( ( item ) => {
|
|
item.addEventListener( 'click', toggleContent );
|
|
} );
|
|
|
|
return () => {
|
|
$tabs.forEach( ( item ) => {
|
|
item.removeEventListener( 'click', toggleContent );
|
|
} );
|
|
};
|
|
}
|