マルチアコーディオン

解説

マルチアコーディオンは、見出しを押すと答えが開閉する FAQ 向けの部品で、複数の項目を同時に開いたままにできるのが特徴です。JavaScript は各トリガーの aria-expanded を読んで真偽を反転させ、隣の回答パネルの hidden 属性を切り替えるだけのシンプルな作りです。状態の真偽をすべて aria-expanded 属性で管理しているため、見た目と支援技術への伝達が同じ情報源で揃います。開いている見出しは背景色が変わり、右側の小さな矢印が transform:rotate で回転して開閉を示します。

使うとよい場面

• よくある質問（FAQ）ページ
• 商品仕様や利用規約など、長い情報を折りたたんで見せたいとき
• 設定項目をグループごとに開閉させたい管理画面

枠線や背景色は CSS で、矢印の回転速度は transition で調整できます。各項目が独立して開くため、一度に 1 つだけ開く挙動にしたい場合は、ほかの開いている項目を閉じる処理を足します。アクセシビリティ面では、トリガーがボタン要素で aria-expanded を持つため、キーボードと支援技術の双方で状態が正しく伝わります。