Recommended: take a look at how hey.com uses <details>/<summary> with <a> to enable dynamic drop-down menus and progressive enhancement via Hotwire, it’s inspiringly simple and elegant.

I’ve also used them for modals and slideovers. Use in conjunction with an [open] selector and adjacency combinators for maximum utility.

See also: <dialog>, already in Chrome, and for which Firefox’s support is looking good in nightly builds; and the :focus-within pseudo-class.

From the department of “You might not need (much) JavaScript”, which has come a long way from checkbox hacks.