76 lines
2.8 KiB
JavaScript
76 lines
2.8 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
// --- Initial Load: Set correct open/closed state ---
|
|
document.querySelectorAll('.collapsible').forEach(button => {
|
|
const content = button.nextElementSibling;
|
|
const chevron = button.querySelector('svg');
|
|
const shouldOpen = button.dataset.open === "true";
|
|
|
|
if (shouldOpen) {
|
|
content.classList.remove("hidden");
|
|
content.style.height = "auto";
|
|
content.style.opacity = "1";
|
|
if (chevron) chevron.style.transform = "rotate(180deg)";
|
|
} else {
|
|
content.classList.add("hidden");
|
|
content.style.height = "0";
|
|
content.style.opacity = "0";
|
|
if (chevron) chevron.style.transform = "rotate(0deg)";
|
|
}
|
|
});
|
|
|
|
|
|
// --- Accordion Click Behavior ---
|
|
document.querySelectorAll('.collapsible').forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
|
|
const content = button.nextElementSibling;
|
|
const chevron = button.querySelector('svg');
|
|
|
|
// First close all others
|
|
document.querySelectorAll('.collapsible').forEach(other => {
|
|
if (other !== button) {
|
|
const otherContent = other.nextElementSibling;
|
|
const otherChevron = other.querySelector('svg');
|
|
|
|
if (!otherContent.classList.contains('hidden')) {
|
|
gsap.to(otherContent, {
|
|
height: 0,
|
|
opacity: 0,
|
|
duration: 0.25,
|
|
ease: 'power2.in',
|
|
onComplete: () => {
|
|
otherContent.classList.add('hidden');
|
|
if (otherChevron) gsap.to(otherChevron, { rotation: 0, duration: 0.25 });
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
// Toggle current
|
|
if (content.classList.contains('hidden')) {
|
|
content.classList.remove('hidden');
|
|
gsap.fromTo(content,
|
|
{ height: 0, opacity: 0 },
|
|
{ height: 'auto', opacity: 1, duration: 0.25, ease: 'power2.out' }
|
|
);
|
|
if (chevron) gsap.to(chevron, { rotation: 180, duration: 0.25 });
|
|
|
|
} else {
|
|
gsap.to(content, {
|
|
height: 0,
|
|
opacity: 0,
|
|
duration: 0.25,
|
|
ease: 'power2.in',
|
|
onComplete: () => {
|
|
content.classList.add('hidden');
|
|
if (chevron) gsap.to(chevron, { rotation: 0, duration: 0.25 });
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
});
|