details

Definition and Usage

The <details> tag specifies additional details that the user can view or hide on demand. The <details> tag can be used to create an interactive widget that the user can open and close. Any sort of content can be put inside the <details> tag. The content of a <details> element should not be visible unless the open attribute is set. The HTML <details> element is used as a disclosure widget from which the user can retrieve additional information or controls. The HTML <details> tag specifies additional details that the user can view or hide on demand. <summary> tag to provide a heading that can be clicked on to expand/collapse the details as required. The <details> tag is written as <details></details> with a <summary> tag inserted between the start and end tag. The expandable/collapsible content follows the <summary> tag (but is also contained between the start and end tags of the <details> element).

Syntax

<details>
<summary>Click to open</summary>
<p>Collapsible content...</p>
</details>