JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<div>
  <strong>1. Question 1?</strong>
  <p class="text"></p>
  <input class="spoilerbutton" type="checkbox" />

  <h2 class="text"></h2>

  <div class="spoiler">
    <div>
      <ul>
        <li><a onclick="document.querySelector(this.attributes['href'].value + ' .spoilerbutton').checked = true;" href="#answer3">Open answer 3</a></li>
        <li>possible answer 2.</li>
        <li>possible answer 3.</li>
      </ul>
    </div>
  </div>
</div>

<div>
  <strong>1. Question 2?</strong>
  <p class="text"></p>
  <input class="spoilerbutton" type="checkbox" />

  <h2 class="text"></h2>

  <div class="spoiler">
    <div>
      <ul>
        <li>possible answer 1.</li>
        <li>possible answer 2.</li>
        <li>possible answer 3.</li>
      </ul>
    </div>
  </div>
</div>

<div style="margin-top: 500px" id="answer3">
  <strong>1. Question 3?</strong>
  <p class="text"></p>
  <input class="spoilerbutton" type="checkbox" />

  <h2 class="text"></h2>

  <div class="spoiler">
    <div>
      <ul>
        <li>possible answer 1.</li>
        <li>possible answer 2.</li>
        <li>possible answer 3.</li>
      </ul>
    </div>
  </div>
</div>

CSS

.spoilerbutton {
  position: absolute;
  margin-top: 9px 0 0 -5px;
  height: 35px;
  width: 102px;
  opacity: 0;
}

.spoilerbutton:checked {
  width: 86px;
}

.spoilerbutton~.text::after {
  content: "Antwoord";
}

.spoilerbutton:checked~.text::after {
  content: "Verberg";
}

.spoilerbutton~.spoiler {
  display: none;
}

.spoilerbutton:checked~.spoiler {
  padding: 5px;
  display: block;
}