JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<label class="question" for="faq1">FAQ1</label>
<input id="faq1" type="radio" name="faq">
<div class="reponse">Réponses</div>

<label class="question" for="faq2">FAQ2</label>
<input id="faq2" type="radio" name="faq">
<div class="reponse">Réponses</div>

<label class="question" for="faq3">FAQ3</label>
<input id="faq3" type="radio" name="faq">
<div class="reponse">Réponses</div>

CSS

.question {
  border: 1px solid red;
  padding: 5px;
  display: block;
  cursor: pointer;
}
.reponse {
  border: 1px solid blue;
  padding: 10px;
  display: none;
}

input {
  display: none;
}
input:checked + .reponse {
  background: red;
  display: block;
}