Accordion

The Accordion component presents a list of items where each item's content can be shown or hidden by clicking its heading toggle. There are two supported markup approaches — both render identically: CPE Patterns HTML uses the Collapse component and is powered by the Collapse JavaScript. Use this when building accordion patterns in Twig templates or custom HTML. Gutenberg block HTML is output by the WordPress core/accordion block and is powered by the WP Interactivity API. The visual styling is applied via accordion.css; the chevron icon is injected via a render_block filter in the WP theme (replacing the block's default "+" character).

Default

  • javascript

The CPE Patterns accordion uses the Collapse component for show/hide behaviour and the u-rotateOnExpand180 utility for the chevron animation. Each item is an h6 heading containing an anchor that controls a sibling Collapse panel. Multiple items can be open simultaneously.

See the Collapse component for full documentation on the underlying Collapse and js-Collapse classes.

<div>
        <h6>
          <a class="u-flex u-flexAlignItemsCenter u-flexJustifyBetween u-sizeFull
            u-border u-borderSilver u-pad u-textLeft u-linkModest"
            href="#accordion-default-1"
            aria-controls="accordion-default-1"
            aria-expanded="false">
            <span class="u-size5of6">Accordion Title One</span>
            <svg width="16" height="16" viewBox="-9 -6 32 32" role="presentation" class="Icon u-rotateOnExpand180">
        <polygon transform="rotate(90, 7, 10)" points="0,0 7,0 14,10 7,20 0,20 7,10"/>
      </svg>
          </a>
        </h6>
        <div class="Collapse js-Collapse u-bgSilver" aria-hidden="true" id="accordion-default-1">
          <div class="u-pad1 u-staggerItems">
            <p>Voglat sajo lofazlo numfosne nowpor ecjudot uv owunegi jezanowe oboif vapoko gepwaib hepamogiz. Si ivburzo nodethar ajoegesoz poczuvab ese hiro diguw pa azosoguz itna vefat. Tiedeek ika usukewuc zug ubjivre kemafe corel egob fena jogir upo av. Kiog vi wobtazle habcif coz ogeug uz ekiso zaken vasdetgu zozi cal wo adujotuk ponisam nurot. Cusi mok toggija kinpoczu wehe duuz bitcidef eriolica fapokefun muli segom veb po eparavuno wotu igi copugtel. Lokbogu lif icaip wudpaki vugsinjek bodbefhi jekzawa mo tewce jileb uzurud gef vuovine wupezi vomidij.</p>
          </div>
        </div>
      </div>
      
      <div>
        <h6>
          <a class="u-flex u-flexAlignItemsCenter u-flexJustifyBetween u-sizeFull
            u-border u-borderSilver u-pad u-textLeft u-linkModest"
            href="#accordion-default-2"
            aria-controls="accordion-default-2"
            aria-expanded="false">
            <span class="u-size5of6">Accordion Title Two</span>
            <svg width="16" height="16" viewBox="-9 -6 32 32" role="presentation" class="Icon u-rotateOnExpand180">
        <polygon transform="rotate(90, 7, 10)" points="0,0 7,0 14,10 7,20 0,20 7,10"/>
      </svg>
          </a>
        </h6>
        <div class="Collapse js-Collapse u-bgSilver" aria-hidden="true" id="accordion-default-2">
          <div class="u-pad1 u-staggerItems">
            <p>Lani luweme mecawi vogamo laasi balud bavre wali ebajuvow rak igwok palov sanjur. Wazig mawniha ba otedini juzusgut me ru cuz tewa zag ti nel vug. Cobre ze ti fuovu jehofasu udu sa usjev uda to lup vurujew za pudcircu bazaceaha wadac.</p>
          </div>
        </div>
      </div>

Gutenberg

The Gutenberg accordion is output by the WordPress core/accordion block. It is powered by the WP Interactivity API (data-wp-* attributes) rather than the Collapse JavaScript, so the js-Collapse class is not present.

Chevron icon: The block outputs a "+" character by default. A render_block filter in the WP theme replaces it with the chevron SVG shown here. Without that filter the rotation animation still applies but the icon will be a "+" instead of a chevron.

Animation: The chevron icon rotates on open/close. Panel show/hide is instant — Gutenberg toggles display: none via the inert attribute and no CSS panel transition is applied. The chevron transition respects prefers-reduced-motion.

Styling: accordion.css targets the .wp-block-accordion* class names to reproduce the same visual output as the CPE Patterns accordion above.

Note: The accordion is not interactive in this pattern library. The WP Interactivity API (data-wp-*) requires WordPress's block JavaScript to be loaded, which is not present here. Open/close behaviour and animation work as expected in the WordPress site.

Izoziej ompov vobkurulo bavjak akmu wih pev cap tiwleke heji tafsas pal magehpo. Ab pedijvum fow ki akumemfel hah gir ulzune fulagger lali hozzur fum duufo zewob ifevos iw roikufe. Regunwe tos gocvatos biwon aseze ubu disecvud ritodba gevwauv atzonvu goeh amko janu.

Begodir mi soke nag zoiwa haw relvuduj so afwihjok iwiug emo jolpuc ba hat tuer. Je fih hup ik lif utigiri lowite jeasewed muwujuno wujco ki pegwobda fudobaka ve geolegu. Dowpuuwo tamuk or ma kupur he ha rede biwwarub wif wog vibacucu nigal sergoj fuso we. Fu lebewe cor ov vatafzi gekizejo ocvimme mavar mu hu ovrec feseshu iciirtar coriwi segukbeg atatu.

<div
        data-wp-context='{ "autoclose": false, "accordionItems": [] }'
        data-wp-interactive="core/accordion"
        role="group"
        class="wp-block-accordion">
      
        <div
          data-wp-class--is-open="state.isOpen"
          data-wp-context='{ "id": "accordion-gutenberg-1", "openByDefault": false }'
          data-wp-init="callbacks.initAccordionItems"
          data-wp-on-window--hashchange="callbacks.hashChange"
          class="wp-block-accordion-item">
          <h3 class="wp-block-accordion-heading">
            <button
              aria-expanded="false"
              aria-controls="accordion-gutenberg-1-panel"
              data-wp-bind--aria-expanded="state.isOpen"
              data-wp-on--click="actions.toggle"
              data-wp-on--keydown="actions.handleKeyDown"
              id="accordion-gutenberg-1"
              type="button"
              class="wp-block-accordion-heading__toggle">
              <span class="wp-block-accordion-heading__toggle-title">Accordion Title One</span>
              <span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">
                <svg width="16" height="16" viewBox="-9 -6 32 32" role="presentation">
        <polygon transform="rotate(90, 7, 10)" points="0,0 7,0 14,10 7,20 0,20 7,10"/>
      </svg>
              </span>
            </button>
          </h3>
          <div
            aria-labelledby="accordion-gutenberg-1"
            data-wp-bind--inert="!state.isOpen"
            id="accordion-gutenberg-1-panel"
            role="region"
            class="wp-block-accordion-panel"
            inert>
            <p>Izoziej ompov vobkurulo bavjak akmu wih pev cap tiwleke heji tafsas pal magehpo. Ab pedijvum fow ki akumemfel hah gir ulzune fulagger lali hozzur fum duufo zewob ifevos iw roikufe. Regunwe tos gocvatos biwon aseze ubu disecvud ritodba gevwauv atzonvu goeh amko janu.</p>
          </div>
        </div>
      
        <div
          data-wp-class--is-open="state.isOpen"
          data-wp-context='{ "id": "accordion-gutenberg-2", "openByDefault": false }'
          data-wp-init="callbacks.initAccordionItems"
          data-wp-on-window--hashchange="callbacks.hashChange"
          class="wp-block-accordion-item">
          <h3 class="wp-block-accordion-heading">
            <button
              aria-expanded="false"
              aria-controls="accordion-gutenberg-2-panel"
              data-wp-bind--aria-expanded="state.isOpen"
              data-wp-on--click="actions.toggle"
              data-wp-on--keydown="actions.handleKeyDown"
              id="accordion-gutenberg-2"
              type="button"
              class="wp-block-accordion-heading__toggle">
              <span class="wp-block-accordion-heading__toggle-title">Accordion Title Two</span>
              <span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">
                <svg width="16" height="16" viewBox="-9 -6 32 32" role="presentation">
        <polygon transform="rotate(90, 7, 10)" points="0,0 7,0 14,10 7,20 0,20 7,10"/>
      </svg>
              </span>
            </button>
          </h3>
          <div
            aria-labelledby="accordion-gutenberg-2"
            data-wp-bind--inert="!state.isOpen"
            id="accordion-gutenberg-2-panel"
            role="region"
            class="wp-block-accordion-panel"
            inert>
            <p>Begodir mi soke nag zoiwa haw relvuduj so afwihjok iwiug emo jolpuc ba hat tuer. Je fih hup ik lif utigiri lowite jeasewed muwujuno wujco ki pegwobda fudobaka ve geolegu. Dowpuuwo tamuk or ma kupur he ha rede biwwarub wif wog vibacucu nigal sergoj fuso we. Fu lebewe cor ov vatafzi gekizejo ocvimme mavar mu hu ovrec feseshu iciirtar coriwi segukbeg atatu.</p>
          </div>
        </div>
      
      </div>