Accordion

JS Script

<script>
  window.BLX = window.BLX || {};

  BLX.accordion = function () {
    const accordions = document.querySelectorAll('[blx-el="accordion"]');

    accordions.forEach(acc => {
      const body = acc.querySelector('[blx-el="accordion-body"]');
      if (!body) return;

      // Ensure closed state starts at 0 height
      if (!acc.open) body.style.height = '0px';

      acc.addEventListener('toggle', function () {
        const isOpen = acc.open;

        if (isOpen) {
          // Measure content height
          const fullHeight = body.scrollHeight;
          body.style.height = fullHeight + 'px';

          // After animation, let it size naturally
          body.addEventListener('transitionend', function handler() {
            if (acc.open) body.style.height = 'auto';
            body.removeEventListener('transitionend', handler);
          });
        } else {
          // Fix height, then animate to zero
          const currentHeight = body.scrollHeight;
          body.style.height = currentHeight + 'px';

          requestAnimationFrame(() => {
            body.style.height = '0px';
          });
        }
      });
    });
  };

  // Auto-init on load
  document.addEventListener('DOMContentLoaded', BLX.accordion);
</script>