The
HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an “open” state. A summary or label must be provided using the
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. The contents of the
element are used as the label for the disclosure widget.
Try it
A
widget can be in one of two states. The default closed state displays only the triangle and the label inside
(or a user agent-defined default string if no
).
When the user clicks on the widget or focuses it then presses the space bar, it “twists” open, revealing its contents. The common use of a triangle which rotates or twists around to represent opening or closing the widget is why these are sometimes called “twisty”.
You can use CSS to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its open attribute. Unfortunately, at this time, there’s no built-in way to animate the transition between open and closed.
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.
Fully standards-compliant implementations automatically apply the CSS display: list-item
element. You can use this to customize its appearance further. See Customizing the disclosure widget for further details.
Attributes
This element includes the global attributes.
open-
This Boolean attribute indicates whether the details — that is, the contents of the
element — are currently visible. The details are shown when this attribute exists, or hidden when this attribute is absent. By default this attribute is absent which means the details are not visible.
Note: You have to remove this attribute entirely to make the details hidden.
open="false"makes the details visible because this attribute is Boolean.
Events
In addition to the usual events supported by HTML elements, the
element supports the toggle event, which is dispatched to the
element whenever its state changes between open and closed. It is sent after the state is changed, although if the state changes multiple times before the browser can dispatch the event, the events are coalesced so that only one is sent.
You can use an event listener for the toggle event to detect when the widget changes state:
details.addEventListener("toggle", (event) => {
if (details.open) {
} else {
}
});
Examples
A simple disclosure example
This example shows a simple
element with a
.
<details>
<summary>System Requirementssummary>
<p>
Requires a computer running an operating system. The computer must have some
memory and ideally some kind of long-term storage. An input device as well
as some form of output device is recommended.
p>
details>
Result
Creating an open disclosure box
To start the
box in its open state, add the Boolean open attribute:
<details open>
<summary>System Requirementssummary>
<p>
Requires a computer running an operating system. The computer must have some
memory and ideally some kind of long-term storage