Summary -
In this topic, we described about the <details> tag along with detailed example.
The <details> tag is new in HTML5. Used to specify additional details. The additional details can view or hide on demand by the user. The <details> tag used to represent additional details.
The <details> tag can be used along with <summary> tag for creating interactive widget to view or hide as required. The content in <details> tag should not be visible and the content in <summary> tag is visible and the clicking on same would display the content of <details> tag.
Any content can be coded inside <details> tag. The basic tag representation like <details></details> with the <summary> tag inserted between the opening and closing tags.
Syntax -
<details>.. text here.. </details>
Example -
<!DOCTYPE html>
<html>
<head>
<title>details tag text example.. </title>
</head>
<body>
<details>
<summary>Copyright 2018.</summary>
<p> - by TutorialsCampus. All Rights Reserved.</p>
</details>
</body>
</html>
Output -
Copyright .
- by TutorialsCampus. All Rights Reserved.