The <details> element

The <details> element represents a hidden container, under which users can obtain more information about the article or any other. To release the hidden details, a user has to click on the <summary> element that must be added as the first child of the parent <details> element.

Syntax:

<details></details>

Attributes:

open; Defines that the <details> tag should be opened by default
global attributes
event attributes

NOTE: Currently <details> element is not supported by the Internet Explorer, as well as Firefox.

Example

The details and summary tags example:

<!DOCTYPE html>
<html lang='en-us'>
<head><style type='text/css'>
    body{background-color:#343434;}
    article{background-color:#f4f4f4; padding:2px 5px; width:90%; margin:1.5em auto;}
    details{margin:-8px auto; width:auto; background:gray; font-weight:bold; font-family:Arial; font-size:smaller;}
</style></head>
<body>
<details>
  <summary>info</summary>
  <p>HTML5 tutorial - semantics and structure</p>
  <p>Date:2015, February 27th</p>
</details>
<article>
    <p>This article (topic) is explaining how a <em>&lt;details&gt;</em> tag works, including its syntax, attributes it supports and this cool little example.</p>
</article>
</body>
</html>

›› go to examples ››

The <details> element

Syntax:

Attributes:

Example

The details and summary tags example:

Comments

About

Contact

Get Connected