アコーディオンFAQセクション

このパーツの使いどころと実装ポイント

このパーツは、質問をクリックすると回答が下に開く「アコーディオン型」のFAQセクションです。各質問は button.faq__q 要素になっており、クリックで親の .faq__item に開閉用クラスをトグルします。回答エリアは .faq__a-wrap の高さをCSSトランジションで変化させるため、開閉の動きがなめらかに見えるのが特徴です。プラス記号のアイコンも開いたときに回転・変化させて、状態がひと目で伝わるよう設計しています。

向いている場面

• 制作・士業・サロンなど、料金や納期の質問が多いサービスサイト
• 申し込み前の不安をつぶしたいLPの下部
• ECや予約サイトの「配送・キャンセル」案内

質問数が増えても縦に積むだけで崩れないので、サポートページにも転用しやすい構造です。

カスタマイズと注意

質問文・回答文を入れ替えるだけで使えます。回答が長い場合は .faq__a の line-height を広げると読みやすくなります。実装上は、開閉を height ではなく max-height で組むと回答量に応じて自動で伸び、可変テキストに強くなります。アクセシビリティ面では質問ボタンに aria-expanded を持たせ、開閉に同期して true/false を切り替えると、スクリーンリーダー利用者にも開閉状態が正しく伝わります。スマホでは質問が2行に折り返してもアイコンが右端で揃うよう、ボタン側を flex 配置にしておくと安定します。

このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。