Accordion
Pattern di interfaccia: un elenco di sezioni comprimibili, che si espandono con un clic. Mostra molte informazioni senza occupare tutto lo schermo. Frequente nelle FAQ, nella navigazione laterale e nelle pagine delle impostazioni.
HTML nativo: <details><summary> (accordion integrato nel browser, senza JS). Implementazioni personalizzate: React Bootstrap, Mantine Accordion, Radix UI Accordion (headless), shadcn/ui. Accessibilità: gli attributi ARIA aria-expanded e aria-controls. Dibattito UX: gli accordion riducono la densità di informazioni ma migliorano la concentrazione — adatti a chi «scorre» più che a chi «legge». Trappola classica: l'animazione dell'altezza dà problemi nei browser moderni (height: auto non è animabile); si usa interpolate-size: allow-keywords (CSS 2024) oppure @starting-style.