A pure CSS concertina element that works on mobile and desktop.
I saw something on a site someone at work showed me and thought I'd have a go at building something like it without JS. In the end I built something with a marginally higher technical requirement but enjoyed playing around with selectors I hadn't used before. I learned a lot while coding it.
'Tab' headings are tabbable using the tabindex property. The hover controls combine hover over the parent and pseudo
selector :not on the children to shrink them. The :focus-withinpseudo selector allowed me to reuse the
hover logic for focus.
I had never used :not or :focus-withinin a project before. :not is particularly powerful for
creating a kind of conditional logic.