details element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The details element represents a piece of hidden content that can be shown upon user request. This element is intended to implement native support for collapsable content and is usually rendered as a caption (provided by the summary element) accompanied by an arrow that suggests the user that more content can be accessed. When the user clicks the caption or the arrow, the content is automatically displayed.

Multiple details elements can be perfectly nested to form a set of collapsable contents in a hierarchical distribution. Additionally, the open attribute can be used to make the content of the element initially visible.

A caption or legend may be provided for the collapsable content. In such case, it must be represented by a summary element, that must be the first child of the details element it belongs to.

Support for the details element is incomplete among browsers. Authors may have to rely on scripts to achieve the same effect cross-browser.

Examples

In the next example, we'll provide a piece of form inside a details element. As expected, this content will appear initially hidden in supporting browsers.

The summary element, properly declared as first child of our details, will provide the caption that will be shown above the content, whether its hidden or not.

<form action="../../form-result.php" target="_blank">
  <p>E-mail address: <input type="email" name="emailaddress"></p>
  <details>
    <summary>Extra options</summary>
    <p><input type="checkbox" name="sendoffers" checked> Send offers and promotions to my e-mail address.</p>
  </details>
  <p><input type="submit" value="Send data"></p>
</form>

E-mail address:

Extra options

Send offers and promotions to my e-mail address.

Now we'll try the open attribute. When this attribute is present the content of the details element will be initially shown. Users will still be able to interact with the element, opening and closing it.

<p>Observational astronomy is a division of the astronomical science that is concerned with recording data, in contrast with theoretical astrophysics, which is mainly concerned with finding out the measurable implications of physical models. It is the practice of observing celestial objects by using telescopes and other astronomical apparatus.</p>
<details open>
  <summary>Galileo Galilei</summary>
  <img src="/assets/images/galileo-galilei.jpg" style="float: right; margin: 0 0 1em 2em" alt="Galileo Galilei, Father of modern observational astronomy">
  <p>Galileo Galilei, often known mononymously as Galileo, was an Italian physicist, mathematician, engineer, astronomer, and philosopher who played a major role in the scientific revolution during the Renaissance.</p>
  <p>His achievements include improvements to the telescope and consequent astronomical observations and support for Copernicanism.</p>
</details>

Observational astronomy is a division of the astronomical science that is concerned with recording data, in contrast with theoretical astrophysics, which is mainly concerned with finding out the measurable implications of physical models. It is the practice of observing celestial objects by using telescopes and other astronomical apparatus.

Galileo Galilei Galileo Galilei, Father of modern observational astronomy

Galileo Galilei, often known mononymously as Galileo, was an Italian physicist, mathematician, engineer, astronomer, and philosopher who played a major role in the scientific revolution during the Renaissance.

His achievements include improvements to the telescope and consequent astronomical observations and support for Copernicanism.

Attributes

Specific attributes

open

A boolean value indicating whether the content of this element should be initially visible or hidden. If this attribute takes the value "open", or the empty string (""), or if it's just present, the content of the element will be initially visible.

Example

<details open>
  <summary>Hippie</summary>
  <p>A hippie (or hippy) is a member of a subculture that was originally a youth movement that emerged in the United States during the mid-1960s and spread to other countries around the world. The word "hippie" came from hipster, and was initially used to describe beatniks who had moved into New York City's Greenwich Village and San Francisco's Haight-Ashbury district.</p>
</details>
Hippie

A hippie (or hippy) is a member of a subculture that was originally a youth movement that emerged in the United States during the mid-1960s and spread to other countries around the world. The word "hippie" came from hipster, and was initially used to describe beatniks who had moved into New York City's Greenwich Village and San Francisco's Haight-Ashbury district.

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.