32 lines
1.1 KiB
JavaScript
32 lines
1.1 KiB
JavaScript
export default function() {
|
|
Array.from(document.querySelectorAll('[data-tabbed=true]')).forEach(tabbed => {
|
|
const header = tabbed.querySelector('.tab-header');
|
|
Array.from(header.children).forEach(element => {
|
|
element.addEventListener('click', () => {
|
|
updateTabVisibility(tabbed, element.dataset.tabIndex);
|
|
})
|
|
});
|
|
|
|
updateTabVisibility(tabbed, tabbed.dataset.tabIndex);
|
|
});
|
|
}
|
|
|
|
function updateTabVisibility(tabgroupElement, index) {
|
|
const tabHeaderElems = tabgroupElement.querySelector('.tab-header').children;
|
|
const tabContentsElems = tabgroupElement.querySelector('.tab-content').children;
|
|
|
|
for (const element of tabHeaderElems) {
|
|
element.classList.remove('active');
|
|
}
|
|
|
|
Array.from(tabHeaderElems).find(e => e.dataset.tabIndex === index).classList.add('active');
|
|
|
|
Array.from(tabContentsElems).forEach(e => {
|
|
if (e.dataset.tabIndex === index) {
|
|
e.style.display = "block";
|
|
} else {
|
|
e.style.display = "none";
|
|
}
|
|
});
|
|
}
|