HTML details Tag

A Thing I Learned Today

Posted by Scott Bollinger / @kfalconspb on June 19, 2019 #Development

Needed An Easy QA 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.

Example of details tag

Item Title

Text to be Expanded

Resources:

Quackit

W3schools

Thanks,

Scott Bollinger / @kfalconspb