Adding a Show All/Hide all Button for the Bricks Nestable Accordion

May 24, 2025

After publishing the Frames version, I realized not everybody uses Frames, so a Bricks example might be beneficial. This works exactly as the Frames example and can be used on a site that uses both (not ideal).

Adding the accordion

Adding the accordion is straightforward. This step requires nothing else besides noting the ID or assigning an ID.

Adding the button

Insert the button where you want and give it a class of toggle-all. Then, in the attributes, a data attribute with a name of data-n-accordion and a value of the ID of the target accordion needs to be present.

The Code

Here is the JavaScript. I tried adding it to WPCodebox and using the code element, but kept getting an error, so I added it to the Bricks custom code footer section.

<script>
document.addEventListener(‘DOMContentLoaded’, () => {

  document.querySelectorAll(‘[data-n-accordion]’).forEach(btn => {

    const selector  = btn.dataset.nAccordion;
    const container = document.querySelector(selector);
    if (!container) return;

    const items = […container.querySelectorAll(‘.accordion-title-wrapper’)]
      .map(title => ({
        title,
        content: title.nextElementSibling
      }))
      .filter(p => p.content && p.content.classList.contains(‘accordion-content-wrapper’));

    const isOpen = item => item.title.getAttribute(‘aria-expanded’) === ‘true’;

    const setItemState = (item, expand) => {
      item.title.setAttribute(‘aria-expanded’, expand);
      item.title.classList.toggle(‘active’, expand);
      item.title.parentElement.classList.toggle(‘brx-open’, expand);
      item.content.style.display = expand ? ‘block’ : ‘none’;
    };

    items.forEach(item => setItemState(item, isOpen(item)));

    const refreshLabel = () => {
      btn.textContent = items.every(isOpen) ? ‘Hide All’ : ‘Show All’;
    };
    refreshLabel();

    let bulkMode = false;                                     // ← default Bricks behaviour

    /*  Button click */
    btn.addEventListener(‘click’, () => {
      const expandAll = items.some(item => !isOpen(item));    // true → open all
      items.forEach(item => setItemState(item, expandAll));

      /* ───────── THE KEY LINE ───────── */
      bulkMode = expandAll;                                   // free-mode only if panels are OPEN
      /* ──────────────────────────────── */

      refreshLabel();
    });

    /* Per-panel toggles */
    const interceptToggle = ev => {
      if (ev.type === ‘keydown’ && ![‘Enter’, ‘ ‘].includes(ev.key)) return;

      const header = ev.currentTarget;
      const item   = items.find(i => i.title === header);
      if (!item) return;

      if (bulkMode) {                                         // independent toggling
        ev.preventDefault();
        ev.stopImmediatePropagation();
        setItemState(item, !isOpen(item));
        refreshLabel();
      }
      /* else: Bricks native handler runs (one-open style) */
    };

    items.forEach(item => {
      item.title.addEventListener(‘click’,   interceptToggle, true);
      item.title.addEventListener(‘keydown’, interceptToggle, true);
    });

    /* update label after native Bricks toggle (only when bulkMode is off) */
    container.addEventListener(‘click’, e => {
      if (e.target.closest(‘.accordion-title-wrapper’) && !bulkMode) {
        requestAnimationFrame(refreshLabel);
      }
    });
  });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', () => {

  document.querySelectorAll('[data-n-accordion]').forEach(btn => {

    const selector  = btn.dataset.nAccordion;
    const container = document.querySelector(selector);
    if (!container) return;

    const items = [...container.querySelectorAll('.accordion-title-wrapper')]
      .map(title => ({
        title,
        content: title.nextElementSibling
      }))
      .filter(p => p.content && p.content.classList.contains('accordion-content-wrapper'));

    const isOpen = item => item.title.getAttribute('aria-expanded') === 'true';

    const setItemState = (item, expand) => {
      item.title.setAttribute('aria-expanded', expand);
      item.title.classList.toggle('active', expand);
      item.title.parentElement.classList.toggle('brx-open', expand);
      item.content.style.display = expand ? 'block' : 'none';
    };

    items.forEach(item => setItemState(item, isOpen(item)));

    const refreshLabel = () => {
      btn.textContent = items.every(isOpen) ? 'Hide All' : 'Show All';
    };
    refreshLabel();

    let bulkMode = false;                                     // ← default Bricks behaviour

    /*  Button click */
    btn.addEventListener('click', () => {
      const expandAll = items.some(item => !isOpen(item));    // true → open all
      items.forEach(item => setItemState(item, expandAll));

      /* ───────── THE KEY LINE ───────── */
      bulkMode = expandAll;                                   // free-mode only if panels are OPEN
      /* ──────────────────────────────── */

      refreshLabel();
    });

    /* Per-panel toggles */
    const interceptToggle = ev => {
      if (ev.type === 'keydown' && !['Enter', ' '].includes(ev.key)) return;

      const header = ev.currentTarget;
      const item   = items.find(i => i.title === header);
      if (!item) return;

      if (bulkMode) {                                         // independent toggling
        ev.preventDefault();
        ev.stopImmediatePropagation();
        setItemState(item, !isOpen(item));
        refreshLabel();
      }
      /* else: Bricks native handler runs (one-open style) */
    };

    items.forEach(item => {
      item.title.addEventListener('click',   interceptToggle, true);
      item.title.addEventListener('keydown', interceptToggle, true);
    });

    /* update label after native Bricks toggle (only when bulkMode is off) */
    container.addEventListener('click', e => {
      if (e.target.closest('.accordion-title-wrapper') && !bulkMode) {
        requestAnimationFrame(refreshLabel);
      }
    });
  });
});
</script>