Using the <details> element:
The <details> tag specifies additional details that the user can view or hide on demand.
The <details> tag can be used to create an interactive widget that the user can open and close. Any sort of content can be put inside the <details> tag.
The content of a <details> element should not be visible unless the open attribute is set.
The numbers in the table specify the first browser version that fully supports the element.
|<details>||12.0||Not supported||Not supported||6.0||15.0|
The <details> tag is new in HTML5.
Tip: The <summary> tag is used to specify a visible heading for the details. The heading can be clicked to view/hide the details.
= New in HTML5.
|open||open||Specifies that the details should be visible (open) to the user|
The <details> tag also supports the Global Attributes in HTML.
The <details> tag also supports the Event Attributes in HTML.
HTML DOM reference: Details Object
Most browsers will display the <details> element with the following default values: