HTML <details> Tag

The <details> tag creates an element that can show and hide its content. It is commonly refered to as a disclosure widget that toggles, i.e. open and close, to reveal its details.

HTML Tag

Example

#

A <details> element with a list of cities.
Click the triangle to view its content.

Cities in Europe

Rome

Athens

Madrid

<details>
  <summary>Cities in Europe</summary>
  <p>Rome</p>
  <p>Athens</p>
  <p>Madrid</p>
</details>

Code Explanation

<details> - defines a content container. It's called a disclosure widget.

<summary> - defines the element's title. If not set the browser will display the word Details

Any elements after <summary> will be the widget's content that can be toggled.


Using <detail>

The <details> tag creates a container, a so-called disclosure widget.

A disclosure widget can be toggled (opened and closed) to reveal its details.

This tag is rendered with a triangular button that indicates the widget's state.

The caption for this element is specified with the <summary> tag.

Note: Not all browsers support the <details> element.

Tip: Developers generally create their own custom disclosure widgets with CSS, JavaScript, or Bootstrap.

More Examples

A <details> widget with the open attribute.
This reveals the content when the page is loaded.

Cities in Europe

Rome

Athens

Madrid

<details open>
  <summary>Cities in Europe</summary>
  <p>Rome</p>
  <p>Athens</p>
  <p>Madrid</p>
</details>

Attributes for <details>

This table lists the <details> tag attributes.

Attribute Value Description
open open Specifies that the content is visible to the user. The default is 'not open'.
id    value Provides the details element with a unique identifier.
class    classnames Assigns one or more classnames to the details element.
style    CSS-values Assigns CSS style values to the details element.

For additional global attributes see our global attributes list.


Browser support

Here is when <details> support started for each browser:

Chrome
12.0 Jun 2011
Firefox
49.0 Sep 2016
IE/Edge
-- Not supported
Opera
15.0 Jul 2015
Safari
6.0 Jul 2012

You may also like

Guides