The HTML <details> element represents a “disclosure widget” from which the user can obtain additional information or controls. It allows you to create collapsible sections of content on a webpage, providing an interactive way to hide or reveal content as needed.
Syntax
The basic syntax for the <details> element is as follows:
1 |
<details>
|
2 |
<summary>Click to toggle</summary> |
3 |
<!-- Content to be revealed or hidden -->
|
4 |
</details>
|
The <details> element should contain a <summary> element as its first child. The content to be revealed or hidden is placed after the <summary> element and can be marked up like most normal content; a <p>, a <div>, an <img>, and so on.
Example
Here’s a simple example with barely any styling at all. It shows how the <details> element can be used, with two <summary> elements, each revealing a <p> when clicked:
Here’s a second example, with slightly more HTML markup, in order to make styling with CSS slightly easier. This demo is taken from Jemima Abu’s tutorial How to Build an HTML Accordion (No CSS or JavaScript!)
Attributes
The <details> element supports the following attributes:
-
open: specifies that the details should be visible when the page loads. This attribute doesn’t require a value, and can be included like so:<details open>
Content
The <details> element can contain HTML content like text, images, lists, tables, and more. You can include valid HTML elements within the <details> element to provide the desired content that will be revealed or hidden.
Did You Know?
- The
<details>element is commonly used to create collapsible sections, such as frequently asked questions (FAQs), additional information sections, or spoiler content. - When using the
<details>element, the summary should be concise and clearly indicate what will be revealed or hidden when clicked. - You can style the appearance of the disclosure widget using CSS to customize its visual presentation.
Styling
By default, the <summary> element uses the text cursor. Consider changing this to a pointer cursor to show the user that this is an interactive element.
1 |
details summary { |
2 |
cursor: pointer; |
3 |
}
|
Learn More
HTML Elements
