@arrow-ecs/reflex/js/accordion.js

Reflex UI library

const expand = (accordion, forceExpand, forceClose) => {
  if (forceExpand) {
    accordion.classList.add('active');
  } else if (forceClose) {
    accordion.classList.remove('active');
  } else {
    accordion.classList.toggle('active');
  }

  const panel = accordion.nextElementSibling;
  if (!forceExpand && panel.style.maxHeight) {
    panel.style.maxHeight = null;
  } else if(!forceClose){
    panel.style.maxHeight = panel.scrollHeight + "px";
  }
}

const expandAccordion = (onload, toggleAll, closeAll, accordion) => {
  const acc = (accordion || document).getElementsByClassName('accordion-title');

  if (!acc || !acc.length) { return false; }

  for (let i = 0; i < acc.length; i++) {
    // if there is an accordion set to active on load then expand it
    if (onload && acc[i].classList.contains('active')) {
      expand(acc[i], onload);
    }

    // if expand/collapse all then force expand/collapse the accordions
    // else add event listeners to handle on click
    if (toggleAll) {
      expand(acc[i], toggleAll === 'Y');
    } else if (closeAll) {
      expand(acc[i], false, closeAll === 'Y');
    } else{
      acc[i].addEventListener('click', () => {
        expand(acc[i]);
      });
    }
  }
}

const expandAllAccordion = () => {
  // add event listener for handling expand all and collapse all
  const expandAll = document.getElementsByClassName('accordion-expand-all');

  if (expandAll && expandAll.length) {
    for (let i = 0; i < expandAll.length; i++) {
      expandAll[i].addEventListener('click', (e) => {
        const accordionElem = e.target.closest('.accordion');
        const expandAll = e.target.getAttribute('data-expand-value');
        const collapseAll = e.target.getAttribute('data-collapse-value');
        expandAccordion(false, e.target.innerHTML === expandAll ? 'Y' : false, e.target.innerHTML === collapseAll ? 'Y' : false, accordionElem);

        e.target.innerHTML = e.target.innerHTML === expandAll ? collapseAll : expandAll;
      });
    }
  }
}

const resizeActiveAccordion = () => {
  const activeAccordions = document.querySelectorAll('.accordion-title.active');

  if (!activeAccordions || !activeAccordions.length) { return false; }

  for (const accordion of activeAccordions) {
    const panel = accordion.nextElementSibling;

    if (!panel) { continue; }

    panel.style.maxHeight = panel.scrollHeight + "px";
  }
}