UI Component LabDisclosure
Disclosure
A single button that shows or hides one section of content.
Demo
Where can I find my order number?
It is in the confirmation email, next to the order date.
Also known as
- Details — GOV.UK Design System
- Collapse — Bootstrap
How to recognize it
A short label, often with a triangle or chevron that points right when closed and down when open. The hidden content appears just below the label.
Behavior
- Activating the label toggles the content between shown and hidden.
- Used for optional extra information, such as help text, that most users do not need.
- This demo uses the native <details> and <summary> elements, which handle the toggling and keyboard support.
Keyboard
| Key | Action |
|---|---|
| Enter / Space | Shows or hides the content. |
Usage notes
- Use it for supplementary content within a section, such as a transcript or a chart's data.
- Make the title describe the content. Avoid vague text like "Show more", and do not switch it between "Open" and "Close".
Similar components
- Accordion: A disclosure is one toggle on its own; an accordion is a set of disclosures stacked under headings.
Sources
- WAI-ARIA APG: Disclosure (Show/Hide) Pattern (Last checked: )
- GOV.UK Design System: Details (Last checked: )
- Bootstrap: Collapse (Last checked: )
- デジタル庁デザインシステムウェブサイト「ディスクロージャー」をもとに作成 (Last checked: )