<details>: The Details disclosure element - HTML

`Creating an open disclosure box`

To start the

box in its open state, add the Boolean open attribute: html System Requirements 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. Result

`Multiple named disclosure boxes`

We include several

boxes, all with the same name so only one can be open at a time: html Graduation Requirements Requires 40 credits, including a passing grade in health, geography, history, economics, and wood shop. System Requirements 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. Job Requirements Requires knowledge of HTML, CSS, JavaScript, accessibility, web performance, privacy, security, and internationalization, as well as a dislike of broccoli. Result Try opening all the disclosure widgets. When you open one, all the others automatically close.

`Customizing the appearance`

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

CSS css details { font: 16px "Open Sans", Calibri, sans-serif; width: 620px; } details > summary { padding: 2px 6px; width: 15em; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; } details > p { border-radius: 0 0 10px 10px; background-color: #ddd; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; } details:open > summary { background-color: #ccf; } This CSS creates a look similar to a tabbed interface, where clicking the tab opens it to reveal its contents. Note: In browsers that don't support the :open pseudo-class, you can use the attribute selector details[open] to style the element when it is in the open state. HTML html System Requirements 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. Result See the page for an example of customizing the disclosure widget.

`Technical summary`

Content categories	Flow content, sectioning root, interactive content, palpable content.
Permitted content	One element followed by flow content.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts flow content.
Implicit ARIA role	`group`
Permitted ARIA roles	No `role` permitted
DOM interface	`HTMLDetailsElement`

`Specifications`

Specification
HTML # the-details-element

`Browser compatibility`

See also ::details-content Help improve MDN Was this page helpful to you? Learn how to contribute.This page was last modified on Apr 28, 2025 by MDN contributors. View this page on GitHub • Report a problem with this content