Solving the height: auto problem
The classic accordion frustration is that height: auto cannot be transitioned — CSS needs two numeric values to interpolate between, and "auto" isn't one. For years the workaround was guessing a max-height large enough to fit any content, which produces a delay on close (the transition runs through the unused space) and breaks whenever content exceeds the guess.
The modern solution is grid-template-rows: 0fr transitioning to 1fr, with the content wrapped in a child that has overflow: hidden. Fractional units are interpolatable, so the row grows smoothly to exactly the content's height — no magic numbers, no guessing, and no delay.
Use the native details element where you can
Three of the four effects here build on <details> and <summary>, which give you the open/close behaviour, keyboard support and screen reader semantics for free. The [open] attribute selector then drives your animation — no state management, no ARIA to maintain.
The trade-off is that <details> toggles instantly, so animating the height itself requires either the grid technique on a wrapper or the newer ::details-content support. Animating the icon and fading the content, as these effects do, works everywhere today.
Accordions and FAQ content
Accordions are the standard pattern for FAQ sections — including on this site — and they're safe for SEO: content inside a collapsed <details> is in the HTML and Google indexes it normally. Pair it with FAQPage structured data and you're eligible for FAQ rich results.
Where accordions go wrong is hiding content people need. If most visitors will want most of the answers, hiding them behind clicks adds friction for no benefit. Reserve accordions for genuinely optional or reference-style content, and consider opening the first item by default so the pattern is obvious.