Lets build a CSS-only Accordion Three Ways

When you build interactive experiences with JavaScript, the key steps usually are:

• Saving a state in a variable
• Modifying the state based on some user interaction
• Adapting the UI based on the new state

A simple accordion UI

This might sound difficult with just HTML and CSS, but there are many tools at our disposal to achieve complex UIs with rich interactivity. We’ve already explored how to build an interactive popup modal with just CSS using invisible checkboxes:

Lets build a HTML- and CSS-only Popup Modal

We are now going to build a content accordion that will look something like this (demonstrating behaviour number 3):

One important note: the three accordions will not just be the exact same accordion built in three different ways, instead: