49 lines
1.4 KiB
JavaScript
49 lines
1.4 KiB
JavaScript
function activateSelfDeactivateSibs(button) {
|
|
if (button.classList.contains("active")) return;
|
|
|
|
Array.from(button.parentNode.children).forEach(s => {
|
|
if (s === button){
|
|
button.classList.add('active');
|
|
} else {
|
|
s.classList.remove('active');
|
|
}
|
|
const targetId = s.dataset.targetId;
|
|
const target = document.getElementById(targetId);
|
|
|
|
if (!target) return;
|
|
|
|
if (s.classList.contains('active')) {
|
|
target.classList.add('active');
|
|
target.dispatchEvent(new CustomEvent("tab-activated", {bubbles: false}))
|
|
} else {
|
|
target.classList.remove('active');
|
|
}
|
|
});
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
// tabs
|
|
document.querySelectorAll(".tab-button").forEach(button => {
|
|
button.addEventListener("click", () => {
|
|
activateSelfDeactivateSibs(button);
|
|
});
|
|
});
|
|
|
|
// accordions
|
|
const accordions = document.querySelectorAll(".accordion");
|
|
accordions.forEach(accordion => {
|
|
const header = accordion.querySelector(".accordion-header");
|
|
const toggleButton = header.querySelector(".accordion-toggle");
|
|
const content = accordion.querySelector(".accordion-content");
|
|
|
|
const toggle = (e) => {
|
|
e.stopPropagation();
|
|
accordion.classList.toggle("hidden");
|
|
content.classList.toggle("hidden");
|
|
toggleButton.textContent = content.classList.contains("hidden") ? "►" : "▼"
|
|
}
|
|
|
|
toggleButton.addEventListener("click", toggle);
|
|
});
|
|
});
|