アコーディオン
UIパターンの1つで、折りたたみ可能なセクションを並べ、クリックで展開する。画面を埋めずに多くの情報を見せられる。FAQ、サイドバーのナビゲーション、設定ページでよく使われる。
ネイティブHTMLでは<details><summary>（ブラウザ組み込みのアコーディオンで、JSは不要）。独自実装には、React Bootstrap、Mantine Accordion、Radix UI Accordion（ヘッドレス）、shadcn/uiなどがある。アクセシビリティ面ではARIAのaria-expandedとaria-controlsを使う。UXでは情報密度が下がる代わりに集中しやすくなる、という議論があり、「斜め読み」向けか「じっくり読む」向けかで使い分ける。よくある落とし穴は、高さのアニメーションが現代のブラウザでうまく動かないこと（height: autoはアニメーション化できない）。interpolate-size: allow-keywords（CSS 2024）か@starting-styleで回避する。