FAQ アコーディオン（クリーン）
質問をクリックで開閉できるFAQセクションです。ポイントは <details> と <summary> という HTML 標準要素だけで開閉を実現しており、 JavaScript を一切使っていないことです。そのため軽量で、ブラウザのデフォルト挙動でキーボード操作にも対応します。
このパーツの使いどころと実装ポイント
質問をクリックで開閉できるFAQセクションです。ポイントは <details> と <summary> という HTML 標準要素だけで開閉を実現しており、JavaScript を一切使っていないことです。そのため軽量で、ブラウザのデフォルト挙動でキーボード操作にも対応します。最初の項目に open 属性が付いているので、読み込み時に1つ目だけ開いた状態で表示されます。
向いている場面
サービスのLPで購入前の不安を解消したいとき、サポートページ、料金・解約・支払いに関するよくある質問の集約に向きます。問い合わせを減らしたいときの定番で、SaaSから店舗予約まで業種を問わず使えます。
カスタマイズと注意点
差し替えどころは summary の質問文と <p> の回答文だけ。項目の増減は <details> ブロックをコピーするだけで済みます。デフォルトの開閉マーカーは list-style:none で消しているので、開閉アイコンを自前で足すと分かりやすくなります。注意点として、同時に1つだけ開く挙動にしたい場合は少量の JavaScript が必要です。回答が長い場合はリンクや改行を入れて読みやすくし、質問文は検索されやすい言葉で書くと、そのまま見つけてもらいやすくなります。
よくある質問
開閉にJavaScriptは必要ですか？
不要です。HTML標準の details と summary 要素だけで開閉します。そのため動作が軽く、JSを読み込めない環境でも内容が表示され、キーボード操作にも対応します。
1つ開いたら他を閉じる動きにできますか？
標準のままでは複数同時に開けます。アコーディオンのように1つだけ開く挙動にしたい場合は、開いた details の toggle イベントで他を閉じる短いJavaScriptを追加してください。