Details accordion

A thin wrapper around the <details> HTML component is used to create a collapsible container, allowing users to hide or show content by clicking on a summary element.

You can style it and use it within a bigger component, which is why it’s specifically built to be very simple, but it’s also useful on its own.

Basic usage

In addition to a required title prop, the <Details> component also accepts an optional className, and passes any additional props through to the HTML details element.

See also

• ExpandableCard - a more styled card component that is exandable.