Skip to main content UI patterns

Expand/collapse widget (native details/summary)

These examples use the native <details> and <summary> elements for an accessible expand/collapse interaction. You can toggle using mouse, touch, or keyboard (Tab to the summary, then Enter or Space).

Examples

Example 1: Single expand/collapse

What is included in this section?

This panel contains supporting text that becomes available when the section is expanded. It remains in the reading order and reflows well on narrow screens.

Tip: If you need to link to a specific part of the content, include a heading inside the panel.

Example 2: Multiple items (independent)

Shipping options

Choose a method that fits your schedule and budget:

  • Standard (3–7 business days)
  • Express (1–2 business days)
  • Pickup (availability varies by location)
Return policy

Returns are accepted within 30 days when items are in their original condition. If you need support, contact the help team for next steps.

Read more: Notes about this pattern.

Accessibility considerations

Native details/summary provides built-in semantics and keyboard support in modern browsers. Keep the summary text specific so people can predict what will open.

Notes

The controlled content container in each widget uses the details class on the <details> element, and the widget is wrapped in a div with class example. Styles include a visible focus indicator and forced-colors support.