Design engineering: a details (or disclosure) component

Every now and then, we need a disclosure component. That is, an element that contains additional information, hidden by default, and revealed when interacted with. In html there is a native element, called details, which is exactly that. So why the need for a custom component? The main reason is for animating the transition between states. Animating the details tag properly is not trivial. The reason being, that details does not render its content (except for the summary) until it is opened.

Common pitfall

For that reason, many implementations avoid using a details tag at all, with the consequence of losing the semantic meaning of the element, and browser behavior such as allowing the user to search for the content of the details tag and automatically opening it if necessary (chromium-based browser, hopefully others soon).

Interactive demo

Play around with these details, you can also set the animation speed by using the buttons at the bottom of this card

This is a details component click on this summary to expand or collapse it

This is the content of the details component. It can be any content, including images, videos, and other detailscomponents.

For example, here is a nested details

And the nested content that goes with it, you can nest as much details as you need. If you use Chrome, Edge, Brave, or any other chromium-based browser, try closing both details and use your browser search feature (cmd/ctrl+f) and search for baNaNa. Both details will open back with your search result.

Here is another nested details within the first nested details

And the nested content that goes with it, you can nest as much details as you need. If you use Chrome, try closing all details and use your browser search feature (cmd/ctrl+f) and search for baNaNa. All details will open back with your search result.

Things to try

Try opening/closing the details
Try interrupting the animation by clicking the summary a second time
In your browser dev tools, try slowing down the css animation speed

Requirements

Functional requirements

The component must use a details tag
Opening/closing the details should be animated
Animations should be interruptible
When interrupting an animation by toggling the details again, the new animation duration should match with the previous animation
On browsers supporting it, searching for text that is contained in the details tag should open the detailstag

Non-functional requirements

The component should be accessible to screen readers
The component should be accessible to keyboard users
The component should be accessible to mouse users
The component should be accessible to touch users

Up next

Images and embeds-->