The <details> tag in HTML creates a collapsible section that users can expand or hide to view additional content.
- Used with the <summary> tag to show a clickable heading.
- Content is hidden by default and expands on click.
- The open attribute keeps it expanded by default.
<!DOCTYPE html>
<html>
<body>
<details>
<summary>
GeeksforGeeks
</summary>
<p>
A computer science portal for geeks
</p>
<div>
It is a computer science portal
where you can learn programming.
</div>
</details>
</body>
</html>
Syntax
<details>
<summary>Click to view </summary>
<p> Additional content that can be shown or hidden.</p>
</details>
Attribute
- details open: The <details> tag has an open attribute that displays the hidden content by default.
Event
- toggle event: Triggered when the <details> element is opened or closed by clicking the <summary>, showing or hiding additional content.
Example: Using <details> Tag with open Attribute
<!DOCTYPE html>
<html>
<body>
<h1>Frequently Asked Questions</h1>
<details open>
<summary>
What is the purpose of the <code><details></code> tag?
</summary>
<p>
The <code><details></code> tag is used to create a
disclosure widget that the user can open and close to
reveal or hide additional content.
</p>
</details>
<details>
<summary>
How does the <code><summary></code>
tag work?
</summary>
<p>
The <code><summary></code> tag provides a heading
for the content within the <code><details></code>
element, and it is always visible to the user.
</p>
</details>
<details>
<summary>
Can I style the <code><details></code>
and <code><summary></code> tags?
</summary>
<p>
Yes, you can use CSS to style both the
<code><details></code> and
<code><summary></code> tags to
match your website's design.
</p>
</details>
</body>
</html>