HTML details tag

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

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.

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.

Resources and References

1. HTML living standard
2. W3C project using Github