Design system Containers

Expander

A row that opens in place, and looks like it: the filled triangle is the affordance, and it rotates with the state.

.mk-disclosure

Overview

The expander reveals content in place. Its complete header row is the button: chevron, section name and an optional compact summary remain one predictable target, while the revealed content follows immediately underneath.

Usage

  • Reveal supporting content in placeUse an expander when the heading or summary is enough for the first scan and the related details can remain collapsed until requested.
  • Keep disclosure separate from actionPressing the header only opens or closes the region immediately below it. Use a link or button for navigation and operations.
  • Preserve context while collapsedThe closed header keeps a specific label and, when useful, a short current summary so the hidden content remains identifiable.

Anatomy

1 2 3
4
  1. 1Chevron. The shared downward chevron rotates upward when the region is open. It mirrors the state; aria-expanded owns it.
  2. 2Section label. Names the content that will be revealed. It remains visible in both states and never collapses to “More”.
  3. 3Trailing summary. Optional, short and read-only. It carries the most useful roll-up while the details are closed.
  4. 4Content region. Follows the button in the DOM and is labelled by it. Closing removes the region from reading and focus order.

Variants

Both variants use the same disclosure contract. Press either header to compare the complete interaction; the surrounding surface decides whether the expander needs its own frame.

Framed
Plain

States

StateSpecimenWhat changes
Closed
The header and summary remain; the content region is hidden.
Open
The chevron rotates and the labelled region follows under the same header.
Hover
The complete header takes the quiet wash and the chevron/label warm together.
Keyboard focus
The standard camel outline follows the full disclosure target, not only its chevron.

Do and don't

Do

Keep the name, state mark and summary in one full-width header button.

Don't

A generic action button hides what will open and makes disclosure look like an operation.

Copy

  • Name the contentUse the section's own noun, not “More”, “Details” or “Expand”.
  • Keep the summary compactOne roll-up value or short phrase; full explanations belong in the revealed region.

Accessibility

  • Use a real buttonaria-expanded exposes the state and aria-controls identifies the region.
  • Keep content adjacentThe revealed region immediately follows its button and leaves the focus order when hidden.
  • Do not rely on rotation aloneThe accessible state lives on the button; the chevron is decorative.

When to reach for something else

  • A table row reveals triage detailUse the Table expanding-row contract; the row and its trailing icon share that interaction.
  • The press navigatesUse a link or Row action; an expander never changes location.
  • The content must remain visibleUse a regular widget section and remove the disclosure entirely.

Markup

<button class="mk-disclosure" id="sectionToggle" type="button"
        aria-expanded="false" aria-controls="sectionPanel">
  <svg class="caret" data-mk-icon="chevron" aria-hidden="true"></svg>
  <span>Section title</span>
  <span class="mk-disclosure-hint">Summary</span>
</button>
<div id="sectionPanel" role="region" aria-labelledby="sectionToggle" hidden>…</div>