44 lines
1.5 KiB
JavaScript
44 lines
1.5 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function () {
|
|
// Get all dropdown headers
|
|
const dropdownHeaders = document.querySelectorAll(".section-header");
|
|
|
|
// Add click event to each header
|
|
dropdownHeaders.forEach((header) => {
|
|
header.addEventListener("click", function () {
|
|
// Toggle active class on header
|
|
this.classList.toggle("active");
|
|
|
|
// Toggle the arrow rotation
|
|
const arrow = this.querySelector(".dropdown-arrow");
|
|
arrow.classList.toggle("rotated");
|
|
|
|
// Update headers and arrows after Bootstrap changes the collapse state
|
|
setTimeout(() => {
|
|
const isExpanded =
|
|
this.getAttribute("aria-expanded") === "true";
|
|
|
|
if (isExpanded) {
|
|
this.classList.add("active");
|
|
arrow.classList.add("rotated");
|
|
} else {
|
|
this.classList.remove("active");
|
|
arrow.classList.remove("rotated");
|
|
}
|
|
}, 50);
|
|
});
|
|
|
|
// Set initial state
|
|
const isInitiallyExpanded =
|
|
header.getAttribute("aria-expanded") === "true";
|
|
const arrow = header.querySelector(".dropdown-arrow");
|
|
|
|
if (isInitiallyExpanded) {
|
|
header.classList.add("active");
|
|
arrow.classList.add("rotated");
|
|
} else {
|
|
header.classList.remove("active");
|
|
arrow.classList.remove("rotated");
|
|
}
|
|
});
|
|
});
|