The QExpansionItem component allows the hiding of content that is not immediately relevant to the user. Think of them as accordion elements that expand when clicked on. It’s also known as a collapsible.
They are basically QItem components wrapped with additional functionality. So they can be included in QLists and inherit QItem component properties.
Usage
Basic
Controlling expansion state
Style
Options
When dealing with inset levels, a general rule of thumb is that header-inset-level adds left padding to header while it doesn’t do anything with the content, while content-inset-level adds left padding to the content.
Behavior
The behavior below of toggling by expand icon only is especially useful when having a route attached to the header of QExpansionItem. This way by clicking header it will activate the route and by clicking the expand icon it will, well, expand the content. You can’t have both actions attached to the whole header, obviously.
Accessibility v2.25+
The header follows the WAI-ARIA disclosure pattern: it exposes role="button" with aria-expanded reflecting the current state and aria-controls pointing at the content container, and Enter or Space toggles it. Its accessible name is a localized “Expand”/“Collapse” label built from the label prop (see Quasar Language Packs); the toggle-aria-label prop overrides the generated label. Collapsed content is truly hidden from assistive technology, not just visually.
When the header is a link (to/href props — see “Toggle by expand icon only” above), the header stays a native link and the toggle ARIA attributes move to the expand icon instead, which becomes its own Tab stop — so navigating and expanding remain separately reachable by keyboard.
Note that rich custom header content is not part of the generated accessible name — screen reader users still hear only the “Expand”/“Collapse” label built from the label prop (or a generic one without it). Set toggle-aria-label whenever the label prop alone doesn’t tell the story.