HTML <details> Tag

Description

The HTML <details> tag is used to create a disclosure widget, which allows you to hide or reveal additional content within a web page. It consists of a summary, typically a clickable heading, and a hidden content section that is initially concealed but can be expanded or collapsed by clicking the summary. This tag is often used for FAQs, tutorials, or any content that benefits from a compact, collapsible format. When the user interacts with the summary, it toggles the visibility of the associated content, providing a user-friendly way to present supplementary information while keeping the page organized and concise.

Properties

Permitted Parents
Any element that accepts flow content
Content
Block, inline and text
Start/End Tags
Start tag: required, End tag: required

Example

<details>
<summary>About CSSPortal</summary>
<p>CSSPortal is a site dedicated to helping you with CSS.</p>
</details>

Attributes

Attribute Definition
open Specifies whether the details should be open (visible to the user) or closed (hidden from the user).

Global Attributes

The <details> tag also supports the Global Attributes in HTML5

Event Attributes

The <details> tag also supports the Event Attributes in HTML5

Browser Support

The following table will show you the current browser support for the HTML <details> tag.

Desktop
Edge Chrome Firefox Opera Safari
791249156
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
184914614.4

Last updated by CSSPortal on: 30th March 2024