| | |
| | | document.addEventListener("DOMContentLoaded",()=>{if(document.querySelectorAll(".faq-block").forEach(e=>{e.querySelectorAll(".faq-item").forEach(e=>{const t=e.querySelector(".faq-item__question"),i=e.querySelector(".faq-item__answer");t&&i&&(t.addEventListener("click",()=>{const o="true"===t.getAttribute("aria-expanded");t.setAttribute("aria-expanded",!o),o?(i.style.height=i.scrollHeight+"px",i.offsetHeight,i.style.height="0",setTimeout(()=>{i.style.display="none",i.style.height=""},300),e.classList.remove("faq-item--expanded")):(i.style.display="block",i.style.height="0",i.offsetHeight,i.style.height=i.scrollHeight+"px",setTimeout(()=>{i.style.height="auto"},300),e.classList.add("faq-item--expanded"))}),t.addEventListener("keydown",e=>{" "!==e.key&&"Enter"!==e.key||(e.preventDefault(),t.click())}))})}),window.location.hash){const e=window.location.hash.substring(1),t=document.querySelector(`[data-faq-id="${e}"]`);if(t){const e=t.querySelector(".faq-item__question");"true"===e.getAttribute("aria-expanded")||e.click(),setTimeout(()=>{t.scrollIntoView({behavior:"smooth",block:"center"})},350)}}}); |
| | | /******/ (() => { // webpackBootstrap |
| | | /*!*************************!*\ |
| | | !*** ./src/faq/view.js ***! |
| | | \*************************/ |
| | | /** |
| | | * 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); |
| | | } |
| | | } |
| | | }); |
| | | /******/ })() |
| | | ; |
| | | //# sourceMappingURL=view.js.map |