The Drill-Down Menu with Details and @scope
Even if you nest details elements, you can ensure only one level of them is open at a time, making a menu you can drill down (and up!) from.
Tag Archive for
Details
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.
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 […]