Expand/Collapse Widgets

Click the headers below to expand or collapse content. Use the toolbar to control them programmatically.

Basic widget: What is an expand/collapse?

An expand/collapse widget reveals additional content when activated. This example uses the native HTML <details> and <summary> elements for accessibility and simplicity.

  • Keyboard accessible by default
  • Supports focus and toggle states
  • No extra JavaScript is needed
Native HTML
Default open: Starts expanded

This widget includes the open attribute, so it starts expanded.

  • Use open to pre-expand important information
  • Remove it to start collapsed
Default open
Content-rich panel: Lists and code samples

You can include any HTML inside the panel, like lists, paragraphs, and inline code.

  • Use <ul>/<ol> to organize content
  • Style with CSS for consistent appearance
  • Keep summaries clear and concise

For example, toggling with JavaScript:

const d = document.querySelector('details.details');
d.open = !d.open;
Rich content
Accordion group: Item 1

In an accordion, opening one item closes the others in the same group.

Accordion
Accordion group: Item 2

This second item opens by closing the others.

Accordion
Accordion group: Item 3

Only one item remains open within this group.

Accordion
Externally controlled: Click the button below

This widget can be toggled programmatically using the button outside.

External control