[Web #9] Styling "Details" & "Summary" HTML Tags For Easy FAQs / Collapsable Boxes 📦

Tumult Whisk
1

web-9Styling "Details" & "Summary" HTML Tags For Easy FAQs / Collapsable Boxes :package:

Here's a video about styling "details" and "summary" tags with just basic HTML and CSS. That's good general information for those wanting to create Frequently Asked Questions (FAQs) webpages.

BUT WAIT… THERE'S MORE!

The video tutorial uses Whisk to show a side-by-side comparison of how the HTML / CSS works. Nice! :slightly_smiling_face:

This is also available as an article here… Styling “Details” & “Summary” HTML Tags – Photics.com

1 Like
2

Also, there was a great comment here… https://old.reddit.com/r/web_design/comments/11oqqlo/web_9_styling_details_summary_html_tags_for_easy/jbu1xem/ …I'm not sure about the accessibility of this feature. I tested it with WAVE and I didn't see any errors, but there might be more to it than that.

3

Awesome, works well in this video! I should probably change our FAQ pages to use this tag... (though sadly still cannot entirely remove JavaScript for it as they still need to look up the URL hash and decide if something should be open or not.)

1 Like