[ad_1]

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 , 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  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.

You might also find that making the summary text unselectable makes for a better user experience. Notice in the above examples how clicking on the summary often results in some of the text being highlighted?

Do consider whether the summary should be selectable by the user before doing this.

1	details summary {
2	cursor: pointer;
3	user-select: none;
4	}

Summary Pseudo-Elements

There are some great pseudo-elements associated with the details and summary elements (like ::marker) which can help you style things even more. Check out this lovely mailbox idea using the open attribute, by Kilian Valkhof.