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:
AخA
<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><details></em> tag works, including its syntax, attributes it supports and this cool little example.</p>
</article>
</body>
</html>
Comments
No comments have been made yet.
Please login to leave a comment. Login now