アコーディオンFAQ
これは、見出しを押すと答えが開閉するアコーディオン型の FAQ です。各項目はボタンと答えの本文で構成され、クリックすると aria-expanded の真偽を切り替え、本文に is-open クラスを付け外しして開閉します。
解説
これは、見出しを押すと答えが開閉するアコーディオン型の FAQ です。各項目はボタンと答えの本文で構成され、クリックすると aria-expanded の真偽を切り替え、本文に is-open クラスを付け外しして開閉します。この実装は一度に1つだけ開く方式で、別の項目を押すといったん全部閉じてから対象だけ開くため、画面が縦に伸びすぎません。プラス・マイナスのアイコンも開閉に連動して向きが変わり、状態が一目で分かります。
向いている場面
- 料金や納期など、よくある質問をまとめた FAQ ページ
- サービス詳細で補足情報を折りたたんで省スペースに見せたいとき
- 申込フォーム横の注意事項や規約の要点表示
項目はボタンと本文のセットを複製するだけで増やせます。複数同時に開けるようにしたい場合は、他項目を閉じる処理を外すだけで切り替えられます。アクセシビリティの要として aria-expanded が状態を伝えるので、装飾アイコンには aria-hidden を付けて読み上げの重複を避けています。開閉の速さや余白は CSS で調整でき、検索エンジン向けには本文を 初期から DOM 内に置いておくと内容が確実にクロールされます。
使用例・適したシーン
- FAQ セクション
- 詳細スペック表示
- ナビゲーションの折りたたみ
よくある質問
複数の項目を同時に開けるようにできますか
できます。標準では1つ開くと他を閉じる作りですが、押したとき他の項目を閉じる処理を外せば、それぞれ独立して開閉でき、複数を同時に開いたままにできます。
質問項目を追加するにはどうすればよいですか
質問のボタンと答えの本文がひとまとまりになっているので、その一組をコピーして文言を差し替えるだけで増やせます。JavaScript は全項目を自動で拾うため、追加のスクリプト変更は不要です。