Spoiler Widget

Sometimes you want to share something on a web page that is a spoiler. To do that you could style the text in a way that it is hidden until you click on it.

Here's an example:

---

This was an interesting farce that relied on ridiculous robot logic, in a good way. I'm not sure how I feel about it but don't regret having read it. I wasn't sure where the story was going but liked how it finished. Kafka was the main vibe I got throughout, though I'm not familiar with Borges. A bit heavy-handed at times, and the MC's continued willingness to go along with being dismantled long into the book was aggravating.

---

How does this work?

This works because of several different parts of HTML and CSS that are in common usage:

• label elements surrounding an input with type of checkbox can toggle states.
• The CSS :has() selector can read whether a checkbox is on or off, and apply a style based on that.
• The CSS filter: property can blur text.

It's pretty great that this works without JavaScript, and without requiring a name or id attribute. It also works on mobile devices with a tap.

HTML

<p>
  This was an interesting farce that relied on ridiculous robot logic,
  in a good way. I'm not sure how I feel about it but don't regret
  having read it. I wasn't sure where the story was going but liked
  how it finished. Kafka was the main vibe I got throughout, though
  I'm not familiar with Borges. A bit heavy-handed at times, and
  <label class="spoiler">
      <input type="checkbox">the MC's continued willingness to go
      along with being dismantled long into the book was aggravating.
  </label>
</p>

CSS

label.spoiler {
  transition: all 0.5s ;
  filter: blur(0.5ch);
  background-color: #ccc !important;
  color: #ccc !important;
  cursor: pointer;
}
/* Note that the checkbox itself is hidden visually
   but still works to store whether spoiler display is toggled */
label.spoiler input[type="checkbox"] {
  display: none;
}
label.spoiler:has(input[type="checkbox"]:checked) {
  filter: blur(0);
  background-color: initial;
  color: initial;
}