Exploring the details html element
Dated:
This article has been posted under the following categories: blog, exploring, html and under-used
One of the underused HTML elements is the <details>
element. For the uses cases this tag gives you, it is not used enough on websites.
Lets explore its uses together. This tag is used to make an expanding/collapsing detail/summary view. The browser then adds interaction to the element, allowing the user to open/close the element itself. Lets take a look at a basic example:
<details>
<summary>This is the summary</summary>
<p>This is the body</p>
<p>Multiple tags are allowed here</p>
</details>