The <details> tag in HTML is used to create a disclosure widget from which the user can view or hide additional information. It is used with the <summary> tag, which provides the title or header for the details section. It's generally used for FAQs, dropdown menus, or to show/hide additional content.
<!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 detail tag has an attribute called open which is used to display the hidden information by default.
Event
- toggle event: It's a feature allowing hiding or showing extra information by interaction with the summary in HTML details.
<details> tag with open attriute
<!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>