I believe using a checkbox element and the :checked selector alongside siblings matching would do the trick.

That would do nothing for screen readers thus compromising accessibility.

If you use the checked state to of a checkbox to change the display property (i.e. toggle between none and initial), that will change the content's visibility and its availability to screen readers.

I've done / seen so many hacky things in web dev I would be surprised how many websites even work properly with screen readers.

Such is the sad state of web development.

As I do hacky work on the web I sometimes wonder why specific UI elements don't exist yet instead of people being forced to hack other elements to do things the web doesn't support. I can't remember a good example off the top of my head currently sadly.

Could you just nest <details> elements?

Seems like it could be done with a checkbox and some cash. I'm sure someone could figure it out.

The article has exactly this scenario as an example of where pure CSS can replace JS.

It could be done using `input:checked + sibling` selector e.g. like this: https://jsfiddle.net/6bgemn0s/

For something fancier it would be possible to style a label with appropriate for="" attribute and hide the checkbox completely, then even apply some transitions: https://jsfiddle.net/6bgemn0s/1/