JSFiddle - React, Tailwind, and code Playground

by cleaver

HTML

<div>
  Hello 1

  <input type="checkbox" id="koko" />

  <label for="koko">Show T1</label>

  <div class="iiii">
    Hello T1

    <input type="checkbox" id="koko2" />

    <label for="koko2">Show T2</label>

    <div class="iiii">
      Hello T2
    </div>
  </div>
</div>

CSS

input {
  opacity: 0;
  position: absolute;
}

.iiii {
  visibility: none;
  max-height: 0;
  opacity: 0;
  transition: all .25s ease;
  overflow: hidden;
}

input:checked ~ .iiii {
  visibility: visible;
  max-height: unset;
  opacity: 1;
}

input:checked ~ label {
  display: none;
  color: red;
}