アコーディオンメニュー
このアコーディオンメニューは、見出しボタンを押すと答えが開閉する FAQ 向けの UI です。各見出しは button 要素で、開閉状態を aria-expanded 属性で持ちます。JavaScript はクリック時にこの属性を切り替え、本文の max-height を scrollHeight の値に設定するこ…
解説
このアコーディオンメニューは、見出しボタンを押すと答えが開閉する FAQ 向けの UI です。各見出しは button 要素で、開閉状態を aria-expanded 属性で持ちます。JavaScript はクリック時にこの属性を切り替え、本文の max-height を scrollHeight の値に設定することで、高さの変化をなめらかにアニメーションさせます。閉じるときは値を空に戻すだけです。1 つ開くと他は自動で閉じる、いわゆる単一開閉型になっています。
使う場面
- よくある質問（FAQ）ページで、質問と回答をコンパクトにまとめたいとき
- 料金表やサービス詳細など、補足情報を折りたたんで一覧性を保ちたいとき
- 長い説明を初期状態で隠し、必要な人だけ展開させたいとき
aria-expanded を使っているのでスクリーンリーダーにも開閉状態が伝わります。開閉アイコンはプラス記号を ::after で描いているため、文字や角度を変えるだけで見た目を調整できます。複数同時に開きたい場合は、他を閉じる処理を外せば対応できます。
使用例・適したシーン
- FAQ セクション
- 詳細スペック表示
- ナビゲーションの折りたたみ
よくある質問
複数の項目を同時に開けるようにできますか？
できます。クリック時にすべての見出しを一度閉じている処理を外せば、各項目が独立して開閉するようになります。ひとつだけ開く挙動と、複数開ける挙動のどちらにも対応できます。
キーボードやスクリーンリーダーでも使えますか？
はい。見出しはボタン要素で、開閉状態を aria-expanded 属性で伝えているため、キーボードのフォーカスや支援技術にも開いているか閉じているかが正しく伝わります。