Disclosure

A disclosure is a widget that enables content to be either collapsed (hidden) or expanded (visible). It has two elements: a disclosure button and a section of content whose visibility is controlled by the button. When the controlled content is hidden, the button is often styled as a typical push button with a right-pointing arrow or triangle to hint that activating the button will display additional content. When the content is visible, the arrow or triangle typically points down.

— Disclosure Pattern, WAI ARIA Authoring Practices Guide (APG)

§ Notes

Missing.css uses the <details> element for disclosures. Disclosures can be made into an accordion by applying a fixed name attribute to each <details> element.

Keyboard Interaction

• Enter : Activate the disclosure control and toggle visibility of the disclosure content.
• Space : Activate the disclosure control and toggle visibility of the disclosure content.

§ Example