21 lines
623 B
JavaScript
21 lines
623 B
JavaScript
|
// retoor <retoor@molodetz.nl>
|
||
|
|
export class Tabs {
|
||
|
|
constructor() {
|
||
|
|
document.addEventListener("click", (event) => {
|
||
|
|
const button = event.target.closest("[data-tabs] [data-tab]");
|
||
|
|
if (button) {
|
||
|
|
this.select(button);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
select(button) {
|
||
|
|
const bar = button.closest("[data-tabs]");
|
||
|
|
const scope = bar.parentElement;
|
||
|
|
bar.querySelectorAll("[data-tab]").forEach((item) => item.classList.toggle("active", item === button));
|
||
|
|
scope.querySelectorAll(":scope > [data-panel]").forEach((panel) => {
|
||
|
|
panel.hidden = panel.dataset.panel !== button.dataset.tab;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|