This new element helps mark up a section of the document that’s hidden, but can
be expanded to reveal additional information. The aim of the element is to provide
native support for a feature common on the Web—a collapsible box that has a title,
and more info or functionality hidden away.
Normally this kind of widget is created using a combination of markup and scripting.
The inclusion of it in HTML5 intends to remove the scripting requirements and
simplify its implementation for web authors.
<details>
<summary>Some Magazines of Note</summary>
<ul>
<li><cite>Bird Watchers Digest</cite></li>
<li><cite>Rowers Weekly</cite></li>
<li><cite>Fishing Monthly</cite></li>
</ul>
</details>
If details lacks a defined summary, the user agent will define a default summary
(for example, “Details”). If you want the hidden content to be visible by default,
you can use the Boolean open attribute.
be expanded to reveal additional information. The aim of the element is to provide
native support for a feature common on the Web—a collapsible box that has a title,
and more info or functionality hidden away.
Normally this kind of widget is created using a combination of markup and scripting.
The inclusion of it in HTML5 intends to remove the scripting requirements and
simplify its implementation for web authors.
<details>
<summary>Some Magazines of Note</summary>
<ul>
<li><cite>Bird Watchers Digest</cite></li>
<li><cite>Rowers Weekly</cite></li>
<li><cite>Fishing Monthly</cite></li>
</ul>
</details>
If details lacks a defined summary, the user agent will define a default summary
(for example, “Details”). If you want the hidden content to be visible by default,
you can use the Boolean open attribute.