Text

Disclosure

Published on

Description

The disclosure widget uses native <details> and <summary> elements to show and hide content. Use for simple show/hide interactions such as FAQs, additional context, or collapsible sections.

Do not use <details>/<summary> as a replacement for accordions, tabs, menus, or dialogs — they are disclosure widgets only.

Example

Open in new tab
View HTML markup 
  <details>
  <summary><strong>Summary</strong></summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</details>

Example (class="chevron")

Open in new tab
View HTML markup 
  <details class="chevron">
  <summary><strong>Summary</strong></summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</details>

Accessibility

  • <summary> has an implicit button role with aria-expanded state managed by the browser.
  • <summary> neutralizes nested element semantics — a heading inside <summary> will not be announced as a heading.
  • No JavaScript is required for basic disclosure, but interactive patterns beyond simple show/hide need JavaScript for proper state management.
  • CSS-only interactive widgets cannot manage ARIA state and are inaccessible.

References

Variables

None for disclosure