HTML details Tag

Needed An Easy Question and Answer Solution

Looking for a way to make a simple Question and Answer solution for little quiz/reflection sections in my blog posts, I came across many CSS/JS solutions, but the simplest solution, was to use the HTML details tag.

I could pose a questions, unveil an answer, just what I needed.

The details tag encapsulates a summary and paragraph tag, that when the summary item is clicked, it reveals the paragraph text.

There is also an attribute which specifies if the paragraph details are visible to the user by default.

See the snippet below, as an example.

<details>
    <summary>Item Title</summary>
    <p>Text to be Expanded</p>
</details>

Resources:

Quackit https://www.quackit.com/html_5/tags/html_details_tag.cfm ¹

W3schools https://www.w3schools.com/tags/tag_details.asp ²