HTML details - how to use <details> tag

The HTML <details> - is used to provide additional details that can be shown or hidden as needed. By default the content within the <details> tag is hidden unless the open attribute is set. The <summary> tag can be used to show a heading for the details.

Internet Explorer does not support the <details> tag.


The details tag supports the global and event attributes.

Defines whether the details should be visible (open) to the user


<details open="open"> <summary>List of countries</summary> <ul> <li>Australia</li> <li>China</li> <li>India</li> </ul> </details>