Accordion Block – Multiple Open

Description

• open multiple accordion block items by default
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. Use this code to Page Header Injection (page where you use Accordion Block)

<!-- 10.26c16v3 Accordion Block - Multiple Open -->
<script>
window.AccordionMultipleOpenOptions = {
  defaultOpenItems: [1, 3, 5],
  disableOnMobile: true
};
</script>
<script>
(() => {
  if (window.AccordionMultipleOpenInitialized) return;
  window.AccordionMultipleOpenInitialized = true;

  const options = window.AccordionMultipleOpenOptions || {};
  const defaultOpenItems = Array.isArray(options.defaultOpenItems)
    ? options.defaultOpenItems
    : [];
  const disableOnMobile = options.disableOnMobile === true;
  const mobileQuery = window.matchMedia('(max-width: 767px)');

  const shouldRun = () => !(disableOnMobile && mobileQuery.matches);
  const wait = milliseconds => new Promise(resolve => setTimeout(resolve, milliseconds));

  const getDesiredIndexes = itemCount => new Set(
    defaultOpenItems
      .map(itemNumber => Number.parseInt(itemNumber, 10) - 1)
      .filter(index => Number.isInteger(index) && index >= 0 && index < itemCount)
  );

  const applyDefaultOpenItems = async container => {
    if (!container.isConnected || !shouldRun()) return;

    const buttons = [...container.querySelectorAll('.accordion-item__click-target')];
    const desiredIndexes = getDesiredIndexes(buttons.length);

    for (let index = 0; index < buttons.length; index += 1) {
      const button = buttons[index];
      const shouldBeOpen = desiredIndexes.has(index);
      const isOpen = button.getAttribute('aria-expanded') === 'true';

      if (shouldBeOpen !== isOpen) {
        button.click();
        await wait(300);
      }
    }
  };

  const initializeContainer = container => {
    if (!shouldRun()) return;

    if (container.getAttribute('data-should-allow-multiple-open-items') !== 'true') {
      container.setAttribute('data-should-allow-multiple-open-items', 'true');
    }

    if (container.dataset.multipleOpenDefaultsApplied === 'true') return;
    container.dataset.multipleOpenDefaultsApplied = 'true';

    window.setTimeout(() => applyDefaultOpenItems(container), 400);
  };

  const initialize = () => {
    if (!shouldRun()) return;
    document
      .querySelectorAll('.sqs-block-accordion .accordion-items-container')
      .forEach(initializeContainer);
  };

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initialize, { once: true });
  } else {
    initialize();
  }

  new MutationObserver(initialize).observe(document.documentElement, {
    childList: true,
    subtree: true
  });
})();
</script>

#1.2. You can adjust this option to set which item opened by default

defaultOpenItems: [1, 3, 5],

#1.3. You can enable/disable this on mobile with this line

disableOnMobile: true