/**
|
* FAQ Block - Frontend Interactions
|
* Handles accordion functionality for FAQ items
|
*/
|
|
document.addEventListener('DOMContentLoaded', () => {
|
const faqBlocks = document.querySelectorAll('.faq-block');
|
|
faqBlocks.forEach((block) => {
|
const faqItems = block.querySelectorAll('.faq-item');
|
|
faqItems.forEach((item) => {
|
const button = item.querySelector('.faq-item__question');
|
const answer = item.querySelector('.faq-item__answer');
|
|
if (!button || !answer) return;
|
|
button.addEventListener('click', () => {
|
const isExpanded = button.getAttribute('aria-expanded') === 'true';
|
|
// Toggle this item
|
button.setAttribute('aria-expanded', !isExpanded);
|
|
if (isExpanded) {
|
// Collapse
|
answer.style.height = answer.scrollHeight + 'px';
|
// Force reflow
|
answer.offsetHeight;
|
answer.style.height = '0';
|
|
setTimeout(() => {
|
answer.style.display = 'none';
|
answer.style.height = '';
|
}, 300);
|
|
item.classList.remove('faq-item--expanded');
|
} else {
|
// Expand
|
answer.style.display = 'block';
|
answer.style.height = '0';
|
// Force reflow
|
answer.offsetHeight;
|
answer.style.height = answer.scrollHeight + 'px';
|
|
setTimeout(() => {
|
answer.style.height = 'auto';
|
}, 300);
|
|
item.classList.add('faq-item--expanded');
|
}
|
});
|
|
// Handle keyboard navigation
|
button.addEventListener('keydown', (e) => {
|
// Space or Enter triggers the button
|
if (e.key === ' ' || e.key === 'Enter') {
|
e.preventDefault();
|
button.click();
|
}
|
});
|
});
|
});
|
|
// Optional: Add URL hash navigation
|
// If URL has #faq-123, open that specific FAQ
|
if (window.location.hash) {
|
const hash = window.location.hash.substring(1);
|
const targetItem = document.querySelector(`[data-faq-id="${hash}"]`);
|
|
if (targetItem) {
|
const button = targetItem.querySelector('.faq-item__question');
|
const isExpanded = button.getAttribute('aria-expanded') === 'true';
|
|
if (!isExpanded) {
|
button.click();
|
}
|
|
// Scroll to item after a short delay
|
setTimeout(() => {
|
targetItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
}, 350);
|
}
|
}
|
});
|
