Accordion
UI pattern: a list of collapsible sections, click expands. Shows lots of info without filling the screen. Most common for FAQs, sidebar navigation, settings pages.
Native HTML: <details><summary> (browser-built accordion, no JS needed). Custom impls: React Bootstrap, Mantine Accordion, Radix UI Accordion (headless), shadcn/ui. Accessibility: ARIA aria-expanded, aria-controls. UX debate: accordions lower info density but improve focus — use for "scanning vs reading". Classic pitfall: animating height bugs out in modern browsers (height: auto isn't animatable) — use interpolate-size: allow-keywords (CSS 2024) or @starting-style.