Ship product-page disclosure accordions that stay editable

Exclusive toggle sketch (section-scoped)

root.querySelectorAll('[data-disclosure-trigger]').forEach((button) => {
  button.addEventListener('click', () => {
    const willOpen = button.getAttribute('aria-expanded') !== 'true';
    root.querySelectorAll('[data-disclosure-trigger]').forEach((other) => {
      const panel = root.querySelector('#' + CSS.escape(other.getAttribute('aria-controls')));
      other.setAttribute('aria-expanded', 'false');
      if (panel) panel.hidden = true;
    });
    if (willOpen) {
      const panel = root.querySelector('#' + CSS.escape(button.getAttribute('aria-controls')));
      button.setAttribute('aria-expanded', 'true');
      if (panel) panel.hidden = false;
    }
  });
});

Reset siblings first, then open the clicked trigger. Keep aria-expanded truthful after every click.

Native details row (no JS required for basic open)

{% for block in section.blocks %}
  <details class="disclosure__item" {{ block.shopify_attributes }}>
    <summary class="disclosure__summary">
      {{ block.settings.heading | escape }}
    </summary>
    <div class="disclosure__body rte">
      {{ block.settings.body }}
    </div>
  </details>
{% endfor %}

Use when exclusive JS is unnecessary. Still namespace styles under section.id so PDP chrome is untouched.

Button panel row (exclusive-ready)

{% assign panel_id = 'Disclosure-' | append: section.id | append: '-' | append: block.id %}
<div class="disclosure__item" {{ block.shopify_attributes }}>
  <button
    type="button"
    class="disclosure__summary"
    aria-expanded="false"
    aria-controls="{{ panel_id }}"
    data-disclosure-trigger
  >
    {{ block.settings.heading | escape }}
  </button>
  <div id="{{ panel_id }}" class="disclosure__body rte" hidden data-disclosure-panel>
    {{ block.settings.body }}
  </div>
</div>

Prefer this when exclusive open, custom icons, or design-system buttons are required.

Schema sketch — disclosure row blocks

{
  "name": "Product disclosures",
  "settings": [
    {
      "type": "checkbox",
      "id": "exclusive_open",
      "label": "Open only one panel at a time",
      "default": true
    }
  ],
  "blocks": [
    {
      "type": "disclosure",
      "name": "Disclosure",
      "settings": [
        { "type": "text", "id": "heading", "label": "Panel title", "default": "Materials" },
        { "type": "richtext", "id": "body", "label": "Panel content" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Product disclosures",
      "blocks": [
        { "type": "disclosure", "settings": { "heading": "Materials" } },
        { "type": "disclosure", "settings": { "heading": "Size & fit" } },
        { "type": "disclosure", "settings": { "heading": "Shipping & returns" } }
      ]
    }
  ]
}

Preset names must read like PDP education. Seeding three panels teaches merchants the pattern without looking like a store FAQ.