単一開閉アコーディオン
このアコーディオンは、複数の見出しのうち常にひとつだけが開く「単一開閉」型の折りたたみ UI です。クリックされた項目のボタンを起点に、他の開いている項目を閉じてから自分を開閉するため、一度に表示される内容がひとつに保たれます。
解説
このアコーディオンは、複数の見出しのうち常にひとつだけが開く「単一開閉」型の折りたたみ UI です。クリックされた項目のボタンを起点に、他の開いている項目を閉じてから自分を開閉するため、一度に表示される内容がひとつに保たれます。開閉のアニメーションは max-height を 0 から一定値へ transition させることで実現し、JavaScript はクラスの付け外しだけを担当するシンプルな設計です。
どんな場面に向くか
- よくある質問（FAQ）で、関係する答えだけを集中して読ませたいとき
- 商品仕様や料金の補足など、初期表示をすっきりさせたい情報
- サイドメニューや設定画面のセクション切り替え
開閉時間は transition の秒数で、開いた高さは max-height の値で調整します。注意点として max-height 方式は中身より十分大きい値を設定する必要があり、長い文章では途中で切れないよう余裕を持たせてください。アクセシビリティ面では、ボタンに aria-expanded を付けて開閉状態を伝え、キーボード操作でも展開できるようにすると、より多くの利用者に届きます。
使用例・適したシーン
- FAQ セクション
- 詳細スペック表示
- ナビゲーションの折りたたみ
よくある質問
複数の項目を同時に開けますか
この実装は単一開閉型で、ひとつ開くと他は自動で閉じます。同時に複数開きたい場合は、他を閉じる処理を外して、押された項目だけを切り替えるように変更すれば対応できます。
中身が長くて途中で切れてしまいます
開いた高さを max-height で制限しているためです。中身の分量より十分大きい値に設定すれば切れません。可変な内容が多い場合は、実際の高さを測って反映する方法に切り替えると確実です。