HTML <details> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <details> element is used to create a widget that the user can open and close on demand. It allows authors to hide content initially and reveal it only when the user chooses to expand the element. This can be useful for things like FAQs, additional explanations, optional information, or any content that might otherwise clutter the page.

When rendered, the <details> element typically displays a small disclosure arrow or triangle that indicates it can be expanded. By default, the content inside the <details> tag is hidden until the user clicks on the element to expand it. The visible label for the <details> element is provided using a <summary> element, which is usually the first child of <details>. Clicking the <summary> toggles the visibility of the rest of the content.

The content inside <details> can include almost any other HTML elements, including text, images, links, forms, or even other interactive widgets. This makes it a flexible way to manage collapsible content without relying on JavaScript.

When a <details> element is expanded, it automatically reveals its content in a block format. When collapsed, the content is hidden but still accessible to assistive technologies, making it a semantically meaningful way to provide optional or expandable content for accessibility purposes.

Properties

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

Example

HTML

<details>

<summary>About CSSPortal</summary>

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

</details>

Result

Editor

Attributes

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 information will show you the current browser support for the HTML <details> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.