details element

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>

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

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

Events