JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<label class="spoiler-title">
  Spoiler 1 title
  <input type="checkbox">
  <div class="spoiler-hidden">
    Lots of text to show/hide
  </div>
</label>
<br>
<label class="spoiler-title">
  Spoiler 2 title
  <input type="checkbox">
  <div class="spoiler-hidden">
    Ещё больше текста под спойлером
  </div>
</label>

CSS

label {
  cursor: pointer;
  border-bottom: dashed 1px #555;
}
label > input[type="checkbox"] {
  display: none;
}
div.spoiler-hidden {
  display: none;
}
label > input[type="checkbox"]:checked ~ div.spoiler-hidden {
  display: block;
}

JavaScript

/**
 * Тест — спойлеры на чистом CSS
 * без JavaScript
 */