[Web #9] Styling "Details" & "Summary" HTML Tags For Easy FAQs / Collapsable Boxes 📦
Back in Web #6, the ease of the details / summary tags was mentioned. All you had to do was drop support for Internet Explorer and then you could have a pure HTML / CSS solution to creating web boxes that could be opened or closed.
In the video it was mentioned that a separate video wasn't necessary. Yet, styling such tags can be a little tricky. That's why this video was created. It shows how some simple CSS can be used to style details / summary tags.
The example is based on the "Farmside Guide". It's a real-world use of this web technology.
CHAPTERS
00:00 New Feature!
00:37 Setting up With Whisk
00:58 WordPress CSS Comparison
01:09 Adding CSS
01:21 Details & Summary Tags
01:51 Summary Styling
03:01 Details Styling
04:05 Multiple Questions
04:31 Inside Styling
05:08 Highlighting Effect
CREDITS
Farmside — https://www.farmsidegame.com
Whisk — https://tumult.com/whisk/
Web #6 — • [Web #6] 10 Awesome & Important Featu...
OpenMoji
The cute emoji in the thumbnail is from https://openmoji.org (CC BY-SA 4.0)
TAGS
#html #css #webdesign #wordpress #photics
