Details

Expandable container for progressive disclosure

Demo

See more examples

API

Tags

Name Type Content
details Native element <summary> as first child and any other content after that
summary Native element Any, but should be a “summary, caption, or legend for the rest of the contents"

Attributes

Name Value Description
open Boolean attribute When present, the details are shown (everything after summary). When removed details are hidden. If you want Details open by default, add this attribute.

Events

Name Detail Description
toggle None

Fires after Details was opened or closed. If e.currentTarget.open is true, then it was just opened, otherwise it was closed.

Guidelines

Is the content even necessary?

Although Details and Accordion are great tools for progressive disclosure, you should consider if the hidden content is necessary or if it could just be removed altogether.

Clickable elements inside summary

Some designs will include a button or other interactive element in <summary> that should not toggle the details. Most elements behave as normal without toggling Details, but some, like in the example below, need an event handler to preventDefault to stop this from happening:

Navigation

A common application of Details is an expandable navigation. Here's a working example:

Safari flexbox bug

Safari has a bug that prevents summary from being styled as a flex container. It looks like a fix is coming. If your summary needs flexbox, add a div:

Accessibility

The aria-expanded attribute is managed automatically. Pressing spacebar will open/close details.