HTML - Details Tag

The details tag or <details> tag in HTML is used to show and hide a content on click.

Why do we need Details Tag in HTML?

There were no tags in HTML that could be used to show and hide a content on click. With the details tag in semantic tags we can show and hide a content in HTML.

By default the contents of the details tag is hidden. When we click on the text it gets displayed.

There is a summary tag used along with the details tag.

Let us see the details tag in use with the below example.

Example :

<html>
<body>
	<details>
		<summary>Click here to show</summary>
    	<p>This is the content that is hidden from the user. Only on click it opens.</p>	
    </details>
</body>
</html>

Output :

So, if you look at the above code. We have placed the content,

<p>This is the content that is hidden from the user. Only on click it opens.</p>

Inside the details tag.

<details>
	<summary>Click here to show</summary>
	<p>This is the content that is hidden from the user. Only on click it opens.</p>
</details>

The details tag contains a summary tag.

<summary>Click here to show</summary>

And only the contents of the summary tag would be visible to the user. When we click on the text inside the summary tag, the contents of the <p> tag would be displayed. And on clicking it again, the contents of the <p> tag would be hidden.

❮❮ PREV NEXT ❯❯