アコーディオンQ&A
このアコーディオンQ&Aは、定義リストの dl / dt / dd を使い、質問をクリックすると回答が開閉するシンプルな開示パターンです。JavaScript は data-acc 属性を持つ dt にクリックイベントを付け、直後の回答に is-open クラスをトグルするだけ。
解説
このアコーディオンQ&Aは、定義リストの dl / dt / dd を使い、質問をクリックすると回答が開閉するシンプルな開示パターンです。JavaScript は data-acc 属性を持つ dt にクリックイベントを付け、直後の回答に is-open クラスをトグルするだけ。プラス記号は擬似要素 ::after で描き、開いた状態では rotate(45deg) でバツ印に変わります。回答の高さは max-height の遷移で滑らかに広がります。
使う場面
- 料金・納期・修正回数などをまとめる「よくある質問」セクション
- サービス紹介ページで補足情報を畳んでおきたいとき
- サポートページやヘルプセンターの項目一覧
質問文や回答は dt / dd をそのまま増減すれば対応できます。色を変えたい場合はプラス記号の color と下線の border-bottom を調整してください。アクセシビリティを高めるなら dt をボタン化し aria-expanded を付与すると、キーボード操作やスクリーンリーダーへの伝達が改善します。回答が長いページでは初期状態をすべて閉じておくと、縦の見通しがよくなります。
よくある質問
質問項目を増やすにはどうすればいいですか？
HTMLのdlの中にdt（質問）とdd（回答）のペアを追加し、dtにdata-acc属性を付けるだけで動きます。JavaScriptは属性を持つ要素を自動で拾うため、書き換えは不要です。
開閉アイコンの色やデザインは変えられますか？
プラス記号は擬似要素の::afterで作っているので、CSSのcontentで文字を変え、colorで色を調整できます。矢印にしたい場合はcontentを別の記号やSVGに差し替えてください。