Skip to content
Live demo — this example is server-driven; run the showcase locally for the interactive version.

Accordion

A vertically stacked set of disclosure widgets. Each item is a heading + button toggle that expands a content panel. Supports definition-list semantics, fixed-height bodies, bordered and large display variants, and a toggle-icon-at-start layout.

Examples

Definition list

The PF default — renders as <dl> / <dt> / <dd> for term/definition semantics. Multiple items may be expanded at once.

This is the expandable content for item one. It provides details and additional information.
This is the expandable content for item two. It provides details and additional information.
This is the expandable content for item three. It provides details and additional information.
This is the expandable content for item four. It provides details and additional information.

Single expand

Only one item open at a time. Requires shared Alpine state across items — the model's singleExpand() switch generates the shared open-index state.

Body content for item one. Opening another item collapses this one.

Body content for item two.

Body content for item three.

Fixed (multiple expand)

fixed=true caps each expanded body at 9.375rem (PF default) with overflow scroll. Multiple items can be open simultaneously.

This is the expandable content for item one. The fixed modifier caps the expanded body at 9.375rem, so once the content runs taller than that the body scrolls instead of growing.

Use a fixed accordion for changelogs, license text, and long help answers — the reader keeps their place on the page while the details scroll independently inside the panel.

Nothing outside the accordion moves when this inner region scrolls; the scrollbar lives inside the item body.

These stacked paragraphs guarantee the body exceeds the cap at any viewport width.

Scroll inside the body to reach this final paragraph.

This is the expandable content for item two. It provides details and additional information.

This is the expandable content for item three. It provides details and additional information.

This is the expandable content for item four. It provides details and additional information.

Bordered

bordered=true adds pf-m-bordered — items are separated by bottom borders and the container has no rounded corners.

This is the expandable content for item one. It provides details and additional information.

This is the expandable content for item two. It provides details and additional information.

This is the expandable content for item three. It provides details and additional information.

This is the expandable content for item four. It provides details and additional information.

Large bordered

displayLg=true with bordered=true — PF.org's "Display size large": bigger toggle type and inset, here with an inline call-to-action link in the last item's body.

This is the expandable content for item one. It provides details and additional information.

This is the expandable content for item two. It provides details and additional information.

This is the expandable content for item three, with a follow-up action for the reader.

Call to action

Toggle at start

toggleStart=true flips the toggle icon to the left of the text — PF's togglePosition='start'.

This is the expandable content for item one. It provides details and additional information.

This is the expandable content for item two. It provides details and additional information.

This is the expandable content for item three. It provides details and additional information.

This is the expandable content for item four. It provides details and additional information.

Documentation

Accordion props

Parameters accepted by {#include components/data-display/accordion ... /}. Model mode: pass accordion=<Accordion> built in Java instead — the Java tab on each example shows the builder. Items are a list of {title, content, expanded?} maps.

* required
Name Type Default Description
* id String — DOM id on the accordion root. Per-item toggle/content ids are derived as {id}-item-{n}-toggle / {id}-item-{n}-content.
* items List<{title, content, expanded?}> — Each item renders one toggle + content pair. expanded defaults to false.
definitionList boolean false Render as <dl>/<dt>/<dd> (PF default in React). Use when items truly are term/definition pairs.
headingLevel h1 | h2 | h3 | h4 | h5 | h6 h3 Heading element wrapping each toggle (ignored when definitionList=true, which uses <dt>).
bordered boolean false Adds pf-m-bordered. PF React's isBordered.
displayLg boolean false Adds pf-m-display-lg — larger toggle text/padding. PF React's displaySize='lg'.
toggleStart boolean false Adds pf-m-toggle-start — toggle icon before text. PF React's togglePosition='start'.
fixed boolean false Adds pf-m-fixed to each content panel — caps body at 9.375rem with overflow scroll. PF React's isFixed on AccordionContent.
ariaLabel String — Sets aria-label on the accordion root for AT context when no heading is nearby.
isCustomContent boolean false Skips the pf-v6-c-accordion__expandable-content-body wrapper around each item's content — pass raw HTML in item.content for custom layouts.

Divergence from PF React. We expose definitionList as false-by-default (PF React's asDefinitionList defaults to true) — most consumers use heading semantics, and PF's own examples are split roughly 50/50, so neither default is wrong. Shorter prop names: bordered, displayLg, toggleStart, fixed.

Usage

Heading vs. definition list. Use definitionList=true only when items genuinely are term/definition pairs (glossary, key facts). Otherwise stick with the default heading shape so screen readers and document outline tools see proper landmarks.

Pick the right heading level. The default h3 assumes the accordion is one level below an h2 section heading. Override via headingLevel when the accordion is shallower or deeper in your document outline — heading levels should never skip.

Single-expand requires shared state. The runtime template gives each item its own Alpine expanded flag (independent expand/collapse). For single-expand UX, hand-roll an outer x-data="{ open: null }" wrapper and gate each toggle on a shared key — see the Single expand example for the pattern.

Accessibility. Each toggle is linked to its content via aria-controls + aria-labelledby automatically. aria-expanded reflects the live Alpine state. Add ariaLabel on the root when the accordion isn't preceded by a visible heading.


Edit accordion.html on GitHub
Static snapshot of the quarkus-pha showcase — source & live version