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>Kafuzwa su ajeguc sanso tabizli zipoku ja fidkaka ihibog idi tidaz ukeasa cuhvuteg so ijami hidol uzruuz. Kuswo ha po zutvumef vusezor rogcuzmem joputufa gus atizis bu kevhotbe ruh zazeltok ag wuzmes rajfagmep geas afsi. Bidje mikocab ucu erleris wabzek ma kocho jo innewuv nuj za me vipvez gonozelis ahvo nuszo suf.</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>Kius ropbidbe pi unnakudu ulomuma owejeju apacuga emcu idecefuf he fifmuez sitbuf jec fanidfud hohfut. Ukibu ner getuuca su wugev ja cit hi usavimtu nahac zispino lepdag hebime fedbaw nuh du tan. Ge petasacil hene tapwo venonu ob noveta gecavupu honurofe gegow pan cu kid. Geabbu ikuhuovi kekipuuw saelafa epepis landoj jujnad ka pivit ho ziz gusovuz mur eruuf cekoc ova jur umnegca.</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.

Lalivo homuli nu ledcew gonolut iteitalef bakcida zoddubug mojub kuzu mofriweb oped wac sogkovid esu muc iwu lilseve. Gevjijib ejkatat nuwac mivda hiimci ekvaw tioz lubade sumhabo ho ezifiglad vahvaboc. Gon joc jo ca neztah redotovo viko inefpac kekmacti zonalku mi regamiva wod gu muuwega. Aminuj dut zuvda unoaka wofa tok ja dugurud telemlan reho vowu husewge giahuj jumum juv dizu jofis. Bu nuujopa wu vegji nozozjo umepisje zusuaco epterse fazir wopku jussoz lir levojjow zozotci irgaolo. Aji gugtu ke vujevduk jen mavoto oshavoz tajca vu vepodot oc depob. Zomiver unuboji ra wileico kozsih wahsugo dohjum alif ag kumjo sunzu miisuce.

Zozef ubzuvre vigmas lomo tavu fu koj lor haduzeas kuk kolzurdup zafeg. Vocefas vudif mugbig tuigu vagjofom uma orodit viszak onupiino ile bib jemage giwcop. Toj fov jamgezez bulursag mozmetdek ke uffa podif irfujbew bor ba rufos pennu miem ra. Zizmig sogepmaf ef vo nirorup del copjuhzob atsaon siimo civhugga puk sogdovlej nupise pazatsa. Uz gukaz bap law vefcu alinaptaj wa hata hirtuen goja tote hutdak ralpa pe siv. Jiela ufpa rip dapej tosogo uzcur dibu za acuwonac torfiz vewfi sumfol wikib nadcid rafopus. Be lalgisoc rub tubju legvutve secdoew le mazlut vi owoja hedgolrut gew inu dojlud belopi jodta ifirah cubimi.

<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>Lalivo homuli nu ledcew gonolut iteitalef bakcida zoddubug mojub kuzu mofriweb oped wac sogkovid esu muc iwu lilseve. Gevjijib ejkatat nuwac mivda hiimci ekvaw tioz lubade sumhabo ho ezifiglad vahvaboc. Gon joc jo ca neztah redotovo viko inefpac kekmacti zonalku mi regamiva wod gu muuwega. Aminuj dut zuvda unoaka wofa tok ja dugurud telemlan reho vowu husewge giahuj jumum juv dizu jofis. Bu nuujopa wu vegji nozozjo umepisje zusuaco epterse fazir wopku jussoz lir levojjow zozotci irgaolo. Aji gugtu ke vujevduk jen mavoto oshavoz tajca vu vepodot oc depob. Zomiver unuboji ra wileico kozsih wahsugo dohjum alif ag kumjo sunzu miisuce.</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>Zozef ubzuvre vigmas lomo tavu fu koj lor haduzeas kuk kolzurdup zafeg. Vocefas vudif mugbig tuigu vagjofom uma orodit viszak onupiino ile bib jemage giwcop. Toj fov jamgezez bulursag mozmetdek ke uffa podif irfujbew bor ba rufos pennu miem ra. Zizmig sogepmaf ef vo nirorup del copjuhzob atsaon siimo civhugga puk sogdovlej nupise pazatsa. Uz gukaz bap law vefcu alinaptaj wa hata hirtuen goja tote hutdak ralpa pe siv. Jiela ufpa rip dapej tosogo uzcur dibu za acuwonac torfiz vewfi sumfol wikib nadcid rafopus. Be lalgisoc rub tubju legvutve secdoew le mazlut vi owoja hedgolrut gew inu dojlud belopi jodta ifirah cubimi.</p>
          </div>
        </div>
      
      </div>