The HTML Details Element (<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the <summary> element.

A disclosure widget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle. If the first child of the <details> element is a <summary>, the contents of the <summary> element are used as the label for the disclosure widget.

A <details> widget can be in one of two states. The default closed state displays only the triangle and the label inside <summary> (or a user agent-defined default string if no <summary>).

When the user clicks on the widget, or focuses it then presses the space bar, it "twists" open, revealing its contents.

From there, you can use CSS to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its open attribute.

By default when closed, the widget is only tall enough to display the disclosure triangle and summary. When open, it expands to display the details contained within.

Unfortunately, at this time there's no built-in way to animate the transition between open and closed.

Fully standards-compliant implementations automatically apply the CSS display: list-item to the <summary> element.

The common use of a triangle which rotates or twists around to represent opening or closing the widget is why these are sometimes called "twisties".

This example shows a <details> element with no provided summary.

In this situation, the browser will use a default summary string (usually "Details").

This example adds a summary by using the <summary> element inside <details>.

To start the <details> box in its open state, add the Boolean open attribute.

Now let's apply some CSS to customize the appearance of the disclosure box.

This CSS creates a look similar to a tabbed interface, where clicking the tab opens it to reveal its contents.

The disclosure triangle itself can be customized, although this is not as broadly supported. There are variations in how browsers support this customization due to experimental implementations as the element was standardized, so we'll have to use multiple approaches for a while.

The <summary> element supports the list-style shorthand property and its longhand properties, such as list-style-type, to change the disclosure triangle to whatever you choose (usually with list-style-image). For example, we can remove the disclosure widget icon by setting list-style: none.

Chrome doesn't support this yet, however, so we also need to use its non-standard ::-webkit-details-marker pseudo-element to customize the appearance in that browser.

• <summary>