JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
  <li>
    <input type="checkbox" id="tree-1" />
    <label for="tree-1"></label> Tree

    <ol>
      <li>Subtree</li>
      <li>Subtree</li>
      <li>
        <input type="checkbox" id="tree-2" />
        <label for="tree-2"></label> Subtree

        <ol>
          <li>Sub Subtree</li>
          <li>Sub Subtree</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>
    <input type="checkbox" id="tree-3" />
    <label for="tree-3"></label> Tree

    <ol>
      <li>Subtree</li>
      <li>Subtree</li>
      <li>
        <input type="checkbox" id="tree-4" />
        <label for="tree-4"></label> Subtree

        <ol>
          <li>Sub Subtree</li>
          <li>Sub Subtree</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

CSS

label {
  display: inline-block;
  background: #6f6;
  width: 1em;
  height: 1em;
  border-radius: 100%;
  cursor:pointer;
  transition:background-color 500ms;
}

input[type="checkbox"] {
  display: none;
}

ol {
  max-height:100vh;
  overflow:hidden;
  transition:max-height 300ms;
}
input:checked~ol {
  max-height:0;
}

input:checked~label {
  background-color:#f66;
}