スムーズアコーディオン（アクセシブル）
これは開閉できるアコーディオンで、よくある質問（FAQ）や補足説明をたたんでおき、クリックで必要な項目だけを開けるコンポーネントです。見出しボタンを押すと回答パネルが max-height の transition でなめらかに展開し、右の矢印アイコンが rotate(180deg) で反転して開閉状態を視覚的に伝…
解説
これは開閉できるアコーディオンで、よくある質問（FAQ）や補足説明をたたんでおき、クリックで必要な項目だけを開けるコンポーネントです。見出しボタンを押すと回答パネルが max-height の transition でなめらかに展開し、右の矢印アイコンが rotate(180deg) で反転して開閉状態を視覚的に伝えます。
アクセシビリティへの配慮
このアコーディオンは見た目だけでなく、支援技術への対応が組み込まれているのが利点です。ボタンに aria-expanded を持たせて開閉状態をスクリーンリーダーに伝え、閉じているパネルには hidden 属性を付けて読み上げ対象から外します。JavaScript はクリックのたびに全項目を閉じてから対象だけを開くため、常にひとつだけが開く分かりやすい挙動になります。
- FAQ・商品仕様・申込手順の補足など、情報量が多いページの整理に向きます
- 展開の高さは
sacc__panel:not([hidden])のmax-heightで調整します - 長い回答を入れるときは max-height の値を内容より大きめにすると途中で切れません
使用例・適したシーン
- FAQ セクション
- 詳細スペック表示
- ナビゲーションの折りたたみ
よくある質問
複数の項目を同時に開けるようにできますか
現在は他を閉じてからひとつだけ開く動作です。同時に開きたい場合は、クリック時に全項目を閉じている処理を外し、押されたボタンの開閉だけを切り替えるように JavaScript を変更します。
回答が途中で切れて表示されます
開いたパネルの高さは max-height で制限されています。回答テキストが長い場合は、その値を内容に十分な大きさへ広げてください。さらに確実にするなら、内容に応じて高さを計算する方法もあります。