Home > Abakada: Back to Basics > Language References > HTML Elements > DETAILS Element

---

Represents a disclosure widget.

HTML 5

HTML Syntax

<details name=group_name open>
   ...
</details>

NOTE: Both start and end tags are required.

The <details> element represents an interactive widget from which the user can obtain additional information.

A summary or legend may be provided using the <summary> element. If not specified, user agents normally provide its own legend or label.

The widget is typically rendered using a small triangle that rotates or twists to indicate an open or closed state, with the label next to the triangle. The user can open and close the widget on demand by clicking on the label.

Any content can be enclosed within the <details> ... </details> tags, including other elements.

The name attribute enables authors to group related details elements into an exclusive accordion.

The attribute must specify the name of a group that the element is a member of. Opening one member of this group causes other members of the group to close.

Documents that use this grouping feature should keep related elements together in a containing element, such as a <section> or <article> element).

When it makes sense for the group to be introduced with a heading, authors should put that heading in a heading element at the start of the containing element.

The <details> element supports the following attributes, in addition to global attributes common to all HTML elements.

Attribute	Value	Description
name	group_name	Enables grouping of multiple related details elements
open	open	Specifies that the details should be visible (open) to the user

The following example shows how the <details> element may be used.

<details>
   <summary>Legend or label here</summary>
   <p>More information about the legend here.</p>
</details>

which would render on a Web page as follows:

The following example shows use of the name attribute to group related details elements.

<details name=groupName>
   <summary>Legend for details1 here</summary>
   <p>More information about details1 here.</p>
</details>
<details name=groupName>
   <summary>Legend for details2 here</summary>
   <p>More information about details2 here.</p>
</details>
<details name=groupName>
   <summary>Legend for details3 here</summary>
   <p>More information about details3 here.</p>
</details>

which would render on a Web page as follows:

And here is an example of using CSS to customize the appearance of the <details> element.

 Show me 

• 4.11.1 The details element

SUMMARY