{"id":8485,"date":"2026-02-04T20:06:54","date_gmt":"2026-02-05T01:06:54","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=8485"},"modified":"2026-02-04T20:08:35","modified_gmt":"2026-02-05T01:08:35","slug":"an-over-the-top-spoiler-design-with-the-details-element","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/an-over-the-top-spoiler-design-with-the-details-element\/","title":{"rendered":"An Over-The-Top Spoiler Design with the Details Element"},"content":{"rendered":"\n

After reading Stefan Bauer’s fancy idea for toggling a video preview<\/a> to a real embedded video with a <details><\/code> element, it had me thinking just how powerful having an generic “toggle” is in HTML. In CSS, ages ago, we got the :checked<\/code> pseudo selector<\/a>, and it has been used to gosh-danged high heaven to make interactive things on websites. It’s just a toggle. And now toggles are getting easier and easier to make. <\/p>\n\n\n\n

On top of that, we don’t have to be as tricky with how we structure things to use that toggle. When all we had was :checked<\/code>, we had to use :checked ~ .something-else<\/code> style selectors to do more interesting things on the page. Now we essentially just don’t have to. <\/p>\n\n\n

body<\/span>:has(<\/span>#toggle<\/span>:checked)<\/span> {\n  \/* style the body *\/<\/span>\n\n  .something-else {\n    \/* style anything else *\/<\/span>\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
DOM be damned. <\/p>\n\n\n\n
This is basically the same with a <details><\/code> element (toggle). <\/p>\n\n\n
details<\/span> {\n  \/* style the <details> *\/<\/span>\n\n  &[open] {\n    \/* style the details when it is open *\/<\/span>\n  }\n\n  body<\/span>:has(<\/span>&[open]<\/span>) {\n     \/* style the body when the details is open *\/<\/span>\n\n     .something-else {\n       \/* style something else when body has an open details element *\/<\/span>\n     }\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
That feels like weirdly a lot of power \ud83d\ude05. <\/p>\n\n\n\n