=Timeline block fixes. Next up: adding article schema classes

Jake Vanderwerf

9 days ago 47e77f9fac1155c536b2b87fec552c7fcce66fa6

 src/faq/view.js

New file
@@ -0,0 +1,84 @@
/**
 * 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);
      }
   }
});