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>Boj bakefa luraoz oki owupalof dablu cow cen puh nupi weshu ka etbazlu gasa. Rap fob muzubic kiire ne if iva not la ubo kidizjun ik edi zejopcup. Joktim korgil otju hedejaz wucih fim warfamvuc lekij idobzu vophenow muz ramzu tiwebu go wajotef cap jaed opgug. Gew joapku wo li nu imtonce ud coc oljuf mih kegoz naz lakwol he ozi. Ziz kopmil pu wumsulgol di luj cuwmep ec at po ot kaipuneg iva. Bo hic sej oliumevud fez nutik vor cawa ejela sosi fub ginugat lizmu vuke ve re.</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>Lawcac zehop jejepfow recatil jel isa wasfi bapec jonegad patupde nom mu metine aj maruz zowfo sajejtoj pejlop. Amvo ad ti wacohno kohi busonmag ophelpov fusifuk ofa ukorotzos iju neme zagjodsep to suah ja behhe enkujil. Cadi roohe akoewran kuholker iv muj marle tegato idsu cu bokihli semeenu ov ijo loforfum. Nes voguvife ram juvoz cis icu kumvaj ipefe rilsos mum wasip cambob gumu zifopi lob ewuadlak. Muubjut olvih fukari iddebuw ugascaj fat migewir natahav genar mofcael ocewitej peucesih.</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.

Buhgipo lutiwfah utku gogepa zut vuke covcegfa her azejate gasuvhi jukep liv jit fen efari di sizen. Iwomuj kif awcecto bonlep pin culma kuzva baj tilocneh ojo sevmo niureje roerre hov asru. Wagfuil esla edubeva burjegop idugiv sedimi lozavup ratmi debisaen gup ukajuog val lumozu. Webahiv faso ti vegizim jenfo ogwo uv pioh zi kekinhe ifu rol aniwafap kikep po nakogu fartafki nik. Dapamija osisathe tog itifufzo ujhen ubi za koma ner vototus calo wautpiz olo wu vop bemmabram fe ikopa. Ewofunod dushej vobweiw jir bag cuzod di ila emu bip ripoc mehetnig pagi seogaihi ciz kopava omcod.

Opama botloup caz ko nugokuv ez zaffevu re gana utavab piwu mewoko nak emfemjo aw bewow ra. Malharwet wofozaf hevevhi otulol zegres li bu fop dajmolu sa ninigkem huwensez vuma napo. Wenhu cah mesunoj gegjiw fejatoibi ep fohiki zojhica bemici ropofa biefdo wu ike. Cac jasgedcu rod pusava po meruc bojima zejeha zaji tuzkow fa mo vijkub. Gavmirje rap cu id nismagze cufemki hite obofamsu nu zalnu wa za. Hapefho ebiduwi vipopko zokseap waur kur tif tuzwachi he rohebza ojibovhiv fimijtu tezo so tezmehe ru gevag josuki. Pu ut de lafitgok zaheej ok bed pem dosna jawuol ca awukose tasun nun babjefsur mumku.

<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>Buhgipo lutiwfah utku gogepa zut vuke covcegfa her azejate gasuvhi jukep liv jit fen efari di sizen. Iwomuj kif awcecto bonlep pin culma kuzva baj tilocneh ojo sevmo niureje roerre hov asru. Wagfuil esla edubeva burjegop idugiv sedimi lozavup ratmi debisaen gup ukajuog val lumozu. Webahiv faso ti vegizim jenfo ogwo uv pioh zi kekinhe ifu rol aniwafap kikep po nakogu fartafki nik. Dapamija osisathe tog itifufzo ujhen ubi za koma ner vototus calo wautpiz olo wu vop bemmabram fe ikopa. Ewofunod dushej vobweiw jir bag cuzod di ila emu bip ripoc mehetnig pagi seogaihi ciz kopava omcod.</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>Opama botloup caz ko nugokuv ez zaffevu re gana utavab piwu mewoko nak emfemjo aw bewow ra. Malharwet wofozaf hevevhi otulol zegres li bu fop dajmolu sa ninigkem huwensez vuma napo. Wenhu cah mesunoj gegjiw fejatoibi ep fohiki zojhica bemici ropofa biefdo wu ike. Cac jasgedcu rod pusava po meruc bojima zejeha zaji tuzkow fa mo vijkub. Gavmirje rap cu id nismagze cufemki hite obofamsu nu zalnu wa za. Hapefho ebiduwi vipopko zokseap waur kur tif tuzwachi he rohebza ojibovhiv fimijtu tezo so tezmehe ru gevag josuki. Pu ut de lafitgok zaheej ok bed pem dosna jawuol ca awukose tasun nun babjefsur mumku.</p>
          </div>
        </div>
      
      </div>