HTML details tag example

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.

    <summary>Item Title</summary>
    <p>Text to be Expanded</p>
Example of details tag:
Item Title

Text to be Expanded


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

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

  1. Quackit https://www.quackit.com/html_5/tags/html_details_tag.cfm↩︎

  2. W3schools https://www.w3schools.com/tags/tag_details.asp↩︎

Up next Microsoft RD Client iOS App Migrating Website
Latest posts 0104-change-synology-password-cli 0105-free-git-ebook 0103-using-brew-bundle-to-backup-and-restore-mac-app-store-and-brew-apps Update macOS with an all in one alias Mac App Store Command Line Interface 0100-macos-softwareupdate-cli Markdown Crash Course Video What’s New with Fusion and Workstation [HCP1833] File IO in Python Overview of vSphere 7 Video 0095-what_is_iso Migrating Website HTML details Tag Microsoft RD Client iOS App 0091-create_vmware_esxi_usb_install_media Intel NUC Lab Hosts Hardware Setup 0089-installng_microsoft_sql_2016 Installing the First Two Domain Controllers in the VMware ESXi 6.7 Lab Environment 0088-deploy_vcsa_in_lab Macchanger Utility, and Usage Install a Kali Linux VM in a VMware ESXi 6.7 Environment Install Ubuntu 18.04 Virtual Machine in a VMware ESXi 6.7 Environment Install xRDP on Ubuntu 18.04 Install Chromium on Ubuntu 18.04 Install OpenSSH on Ubuntu 18.04 Install VMware Workstation 14 on Ubuntu 18.04 Nested ESXi server Laboratorium Rattus The Animal Within Who is Veeam? RSAC OnDemand Videos 0075-create_win10_sandbox_vm