One important caveat with using `details` is that browsers will render an icon (generally rendered as a triangle) to indicate the collapsed/expanded state on th

One important caveat with using `details` is that browsers will render an icon (generally rendered as a triangle) to indicate the collapsed/expanded state on the `summary` element. There's no reliable cross-browser way to get rid of this icon. I recently implemented a design comp with plain HTML/CSS that had several expandable sections and dialogs and for some of them `summary` was a good choice but other times a combination of `:hover`, `:focus` and `:focus-within` (while making sure to only hide the content visually because these interactions don't play well with screenreaders) ended up being a better choice. When considering the options, keep in mind that although "JS interactions are inaccessible" is widely held as common knowledge, it's not an absolute truth and neither is the inverse "non-JS interactions are never inaccessible". It's important to understand the accessibility implications of what you're doing. With JS this means you may have to do additional things (e.g. dynamically setting ARIA attributes), without CSS this means you have to avoid doing certain things altogether (e.g. toggling `display: none` to hide content).