Disclosure

How it works

The details element is natively accessible and functional. By pressing Enter or Space on the summary, it expands and/or collapses, Tab moves to the next interactive element inside or after it, and the screen reader announces its name and whether it is collapsed or expanded.

Anatomy: details wraps the whole disclosure. summary is its first direct child and acts as the header and the control. ::marker is the disclosure triangle. ::details-content is the content.

The open attribute expands it by default. The name attribute groups several details so that opening one closes the others.

Styling

• Replace the marker with ::marker or remove it and put your own icon.
• Style the content using ::details-content. Do NOT use a div.
• Do not forget to add prefers-reduced-motion.

Use cases

• FAQ with one answer open at a time (the name attribute)
• Inline “read more”
• Spoiler or show solution
• Order details
• Animated markers
• Collapsible filter panel
• Specifications
• Collapsed code and logs
• Emoji marker

Keyboard

• Tab: move focus to the disclosure, or to the next one.
• Shift + Tab: move focus to the previous one, or to the previous interactive element.
• Space or Enter: expand or collapse the details.

Screen readers

• VoiceOver with Safari: “[name], collapsed, summary”. With Chrome or Firefox: “collapsed, disclosure triangle, group”.
• NVDA with Chrome or Firefox: “[name], button, collapsed”.
• TalkBack with Chrome: “collapsed, [name], disclosure triangle”.