HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Specify details that the user can open and close on demand
The <details>
tag specifies additional details that the user can
open and close on demand.
The <details>
tag is often used to create an interactive widget that the user can
open and close. By default, the widget is closed. When open, it expands, and
displays the content within.
Any sort of content can be put inside the <details>
tag.
<details>
to
specify a visible heading for the details.
The numbers in the table specify the first browser version that fully supports the element.
Element | |||||
---|---|---|---|---|---|
<details> | 12.0 | 79.0 | 49.0 | 6.0 | 15.0 |
Attribute | Value | Description |
---|---|---|
open | open | Specifies that the details should be visible (open) to the user |
The <details>
tag also supports the Global Attributes in HTML.
The <details>
tag also supports the Event Attributes in HTML.
Use CSS to style <details> and <summary>:
<html>
<style>
details > summary {
padding: 4px;
width: 200px;
background-color: #eeeeee;
border: none;
box-shadow: 1px 1px 2px #bbbbbb;
cursor: pointer;
}
details > p {
background-color: #eeeeee;
padding: 4px;
margin: 0;
box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney
World Resort featuring exciting attractions, international pavilions,
award-winning fireworks and seasonal special events.</p>
</details>
</body>
</html>
HTML DOM reference: Details Object
Most browsers will display the <details>
element with the following default values:
details {
display: block;
}