An Over-The-Top Spoiler Design with the Details Element
You can style anything you want on the entire page when any given details element is open or closed.
Tag Archive for
Details
Performance-Optimized Video Embeds with Zero JavaScript
Putting a YouTube video inside a closed details element means it won’t load until that details element is opened. We can use that.
Opening a Details Element from the URL
If the #hash in the URL matches the ID of an element *inside* a
element, it’ll open. No other fancy code required.
Relatively New Things You Should Know about HTML Heading Into 2025
Accordion details, toggle switches, styleable selects, responsive video, and more!
::details-content Looks Helpful
The HTML for a <details> element is generally something like: See how I put two <p> elements in there? That’s totally fine. Everything that isn’t the <summary> is visually hidden until the <details> is open, either via the open attribute or the summary is clicked/tapped. So if you’re trying to select “all the content”, you’re […]