Expand/Collapse Widget Demonstration

Examples of native and custom toggles. Each widget is wrapped in an element with class "example", and the controlled content container uses class "details".

Example 1: Native details (collapsed by default)

Uses the built-in HTML <details> element for accessible expand/collapse behavior.

What is an expand/collapse widget?

An expand/collapse widget is a UI pattern that lets you hide non-essential information behind a toggle. It helps reduce visual clutter and allows users to progressively disclose details when they need them.

Using the native details element ensures keyboard accessibility and proper semantics out of the box.

Tip: Click or press Enter/Space on the summary to toggle visibility.

Example 2: Native details (expanded initially)

The same widget, but opened by default using the open attribute.

Frequently Asked Questions
  • Can multiple sections be open? Yes, with individual details blocks.
  • Is it accessible? The native element provides built-in semantics and keyboard support.
  • Can I style it? Absolutely—customize the summary and content as shown here.

Example 3: Custom button toggling a content container

A button controls visibility of a separate content container with class details.

Example 4: Simple accordion with native details

Multiple sections; open one at a time via a small script. Each section uses a details container.

Section A

Accordion section A content. Opening this will close other sections.

Section B

Accordion section B content. Built with native elements and a tiny script.

Section C

Accordion section C content. You can expand to view more.

You can disable the one-open rule by removing the script below.