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:
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.)
Hehe, I know CSS used to be a lot more basic than it is now, my point was simply that I've been working with CSS for a long time but had somehow missed this nugget.
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.)