An accordion widget is simply a series of radio button followed by div. You can see this in action at amazon.com in a product page with multiple purchase options, the buy button will have a radio with multiple options, it's just a radio button. An accordion that allows multiple open panes is a series of checkbox followed by div. More advanced, you can create a flashcard app by allotting two checkboxes per card. I used this technique around 3 years ago when I was studying kanji: http://sokogakuen.framba.ch

The pattern is:

<label> <input class”real-check” type=checkbox /> <span class”fake-check”/> <strong>this is the text label</strong> </label>

- visually hide the checkbox - use a selector like “.real-check:checked + .fake-check and draw whatever you want in the fake check. - the fake check and the text label are both inside the label element. Interacting with them will toggle the check box.

Here's a simple example, toggles for checkbox inputs. https://play.tailwindcss.com/BvQpg9QWEe

Coming soon to Tailwind https://twitter.com/adamwathan/status/1400516100329295875?s=...