You can conditionally style elements based on an input checkbox's `checked` state. A label element can also toggle an input checkbox's `checked state`, but contain whatever HTML you want.

Put the two together and you can do interactive elements without JS:

``` <input id="inputId" type="checkbox" /> <label for="inputId"></label> <div class="toggle-content">Some DOM</div> ```

``` label::after{ display: block; content: '[+]'; } #input, .toggle-content { display: none; }

#input:checked + label::after { content: '[-]'; } #input:checked ~ .toggle-content { display: block; } ```

Off the top of my head, so YMMV but principal is all there.

You start getting headaches if you want animate that though (keyframes that animate a max-height from 0 to 9999999px goes some of the way but feels a bit hacky/doesn't give you much control over consistent timing.)