The HTML <summary> element specifies a visible heading for the <details> tag. The heading can be clicked to view/hide the details.
Example1:
<!DOCTYPE html>
<html>
<body>
<details>
<summary>HTML</summary>
<p>HTML defines the structure of the web page.</p>
</details>
</body>
</html>Output:
HTML
HTML defines the structure of the web page.
Example2:
Style with CSS details and summary elements:
<!DOCTYPE html>
<html>
<head>
<style>
details > summary {
padding: 5px;
width: 200px;
background-color: #f5f3f4;
border: none;
box-shadow: 2px 2px #333;
cursor: pointer;
}
details > p {
background-color: #f5f3f4;
padding: 5px;
margin: 0;
box-shadow: 2px 2px #333
}
</style>
</head>
<body>
<details>
<summary>HTML</summary>
<p>HTML defines the structure of the web page.</p>
</details>
</body>
</html>Output:
HTML
HTML defines the structure of the web page.
Enjoy coding!
Read also: