Each header button pairs with a panel below it. The header's aria-expanded reflects open state and aria-controls points at the panel's id. Animating the height with a CSS grid-template-rows 0fr↔1fr trick is lighter than measuring pixel height in JS.
It differs from a tree view in nesting depth — an accordion usually toggles single-level sections, while a tree view nests arbitrarily deep like folders inside folders. It differs from tabs in layout — tabs sit in a row and swap a single content area, while accordion panels stack vertically and several can be open at once.
Headers must be real buttons (not a div with onclick) so Tab order and Enter/Space toggling work for free. Give each panel role="region" and aria-labelledby pointing at its header so screen-reader users can skim it like a table of contents.
When to use
Use it to organize sections where vertical space is tight — FAQs, filter groups, mobile screens. 3–7 items per group is a reasonable range.