Last Updated on April 26, 2023 by Roshan Parihar
HTML details tag is used to show details on the webpage which user can hide or show on demand.
The details tag can be used to create an accordion widget which shows content on toggle open and close.
Syntax
|
1 |
<details>Put details elements and content here...</details> |
|
1 2 3 4 5 6 |
<details> <summary>title one</summary> <h1>This is the details heading</h1> <p>This is the details content.</p> </details> <p>Click the arrow to check the widget.</p> |
Output
title one
This is the details heading
This is the details content.
Click the arrow to check the widget.
HTML details tag works as an accordion
This is the example for details tag that contains more than one toggle open/close title. We can use this as an accordion widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<details> <summary>according one</summary> <h1>This is the details heading</h1> <p>This is the details content.</p> </details> <details> <summary>according one</summary> <h1>This is the details heading</h1> <p>This is the details content.</p> </details> <details> <summary>according one</summary> <h1>This is the details heading</h1> <p>This is the details content.</p> </details> <p>Click the arrow to check the widget.</p> |
Output
according one
This is the details heading
This is the details content.
according one
This is the details heading
This is the details content.
according one
This is the details heading
This is the details content.
Click the arrow to check the widget.
List of HTML details tag attributes
| Sr. No. | Details attributes | Description |
|---|---|---|
| 1 | open | Used to specify whether the details tag content should be open or not. The open attribute contains boolean values true or false. |