Design Pattern

Disclosure

A disclosure is a simple UI pattern for toggling the visibility of a single region, such as extra information or advanced settings. Using details and summary lets you implement the basic structure safely, without JavaScript.

Difficulty: Beginner Category: Disclosure

When to use / not use

Use it when

  • When you want to fold a single chunk of information, like "Show more" or "Show details"
  • When you want to show supplementary notes only on demand
  • When advanced settings should be hidden by default

Don't use it when

  • When comparing or organizing multiple items is the goal → consider an accordion
  • When a required action or critical information should always be visible
  • When stronger attention is needed → use a dialog or inline message

Anatomy

1 Trigger (clicking it toggles open/closed)
2 Content (shown when expanded)
  1. Trigger — Normally a <summary>. Place text that makes it clear what will be revealed
  2. Content — The body shown when expanded. Hosts extra info or advanced settings

HTML Structure

Key points

  • Using <details> and <summary> manages open/closed state natively
  • The summary text should make it clear what will be revealed
  • Use the open attribute if the content should be expanded by default
  • If the content is required rather than supplementary, prefer a design that doesn't hide it

CSS Implementation

Styling points

  • Give the trigger button-like hover / focus treatment
  • Implement the toggle icon as a pseudo-element or SVG, and rotate it with [open]
  • Clearly separate the body from the trigger with spacing or borders
  • When adding animation, keep it slow enough to follow the state change

Accessibility

WCAG 4.1.2 Name, Role, Value

With details / summary, the browser communicates the open/closed state and the target of the action to assistive technology.

WCAG 2.1.1 Keyboard

<summary> supports keyboard operation and can be toggled with Enter / Space.

Keyboard operation

  • Use Tab to move focus to the trigger
  • Use Enter or Space to toggle visibility

Live Demo

Basic toggle

A minimal disclosure built with details / summary.

PreviewFullscreen

Show more

A pattern that expands only the continuation of a long body of text.

PreviewFullscreen

Settings panel

A panel-style variation that folds advanced settings.

PreviewFullscreen

Common mistakes

Ambiguous summary text

Use text that describes what's inside, not something like "Click here."

Hiding important actions inside it

Putting submit buttons or required inputs inside a fold invites oversights.

Open/closed state isn't visually clear

Use icon or border changes to reinforce the current state visually.