HTML <details> Tag is used for the content/information which is initially hidden but could be displayed if the user wishes to see it. This tag is used to create an interactive widget that the user can open or close.
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.
Syntax
<details>
<summary> Text content </summary>
<div> Content... >
</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.
|
Supported Attributes
This tag is new in HTML5 and also supports the Global Attributes and Event Attributes in HTML.
Example: Implementation of details tag in HTML.
HTML
<!DOCTYPE html>
< html lang = "en" >
< html >
< body >
< h1 >GeeksforGeeks</ h1 >
< 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 >
|
Output:Â
 Example 2: Use of the open attribute with the details tag.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >HTML5 details Tag</ title >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< details open>
< 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 >
|
Output:Â
Â
Supported BrowsersÂ
- Google Chrome 12
- Edge 79
- Firefox 49
- Opera 15
- Safari 6
Last Updated :
29 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...