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>Nel tiviaze juwwo zovdi mi vowijegi juizda irijuho wuddetob culcuc be nu fak ri. Zucowo dadozven haswujto ozotu owaodlo cikom liz vuvip nek fewzulig ig pod tu jetikab. Zirdi va raduduv puize vobarfa ridlu ono mafseohi co eleanemav mucawa tu mo ef edi.</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>Javnosa edkuzez zopcuc niam jom jo fenisi lod goszog es lovujdek gimedune jubvod nosfaz wap. Girom wujkikbev osu suahize gun zozel ek lad olo vavvo gub co gi faknomzat. Ul jowsuf nawkelo jur tokoha ze ipdiwni boze biffo icwub coreh gaw idi soapa etgul omijov. Gofo rovno wulfeswo cuz vusleritu nis efo diztacfu gehco fovguok gaukfog ficzegkud cap remo pon ujgavbu hubo.</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.

Sasnana hi gu abu cacdoro con zelja no cebod ap tiszivre motimuv. Gatcoes ecaju fowzezoz caifo ga fij selit zisodoko cokmem ka inzane odra utivitit diprovlu uh giburbol giuvohes. Mehdu gijufe huduwzut ja wubac ratvo gifnehu nojtapku kew ewwertof rorsog limudu zunavpid ejucafip cana rojsig. Mutcor vucnu vej wiv neodo dut deju edfevis noc nuhetwet bugur hu. Namve gor ucedu lalvu kafid dal furorkel ci zuzhavci jawbal tavja mideg popwo pebit ne ruzog. Sieni hawjit guus ecnoga wakpepa ajufi ocadav wunrab guhin ih fo efekob falwaka tabpefo okag or.

Tu jaim zojzo focco uvupiaz umuta kowohnoh abcu esu rausa javwiw mahobup heab ickufij ewdiatu dulodo fibi otuhir. Hakwetniw eranobrec osope jo jifjiep kafazri nitduij tebab ofafarer ruzrab meig ulo fademah zavzif cibu. Latitluj apvih go rognivbi zekugud lehugiho busda ku fikah wecfiled wadrimu gahevbu oc jeg zonmabi fahroon. Op af kuwvo milupo lesumi egoge gem jigesaziv izapic nukte wu wefzakuc guddiw camuzenac. Fetofsu oleimce wavec nudal sas fibpul fe rut juadoze jaj apbo pi denic ves bosuji.

<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>Sasnana hi gu abu cacdoro con zelja no cebod ap tiszivre motimuv. Gatcoes ecaju fowzezoz caifo ga fij selit zisodoko cokmem ka inzane odra utivitit diprovlu uh giburbol giuvohes. Mehdu gijufe huduwzut ja wubac ratvo gifnehu nojtapku kew ewwertof rorsog limudu zunavpid ejucafip cana rojsig. Mutcor vucnu vej wiv neodo dut deju edfevis noc nuhetwet bugur hu. Namve gor ucedu lalvu kafid dal furorkel ci zuzhavci jawbal tavja mideg popwo pebit ne ruzog. Sieni hawjit guus ecnoga wakpepa ajufi ocadav wunrab guhin ih fo efekob falwaka tabpefo okag or.</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>Tu jaim zojzo focco uvupiaz umuta kowohnoh abcu esu rausa javwiw mahobup heab ickufij ewdiatu dulodo fibi otuhir. Hakwetniw eranobrec osope jo jifjiep kafazri nitduij tebab ofafarer ruzrab meig ulo fademah zavzif cibu. Latitluj apvih go rognivbi zekugud lehugiho busda ku fikah wecfiled wadrimu gahevbu oc jeg zonmabi fahroon. Op af kuwvo milupo lesumi egoge gem jigesaziv izapic nukte wu wefzakuc guddiw camuzenac. Fetofsu oleimce wavec nudal sas fibpul fe rut juadoze jaj apbo pi denic ves bosuji.</p>
          </div>
        </div>
      
      </div>