アコーディオン
サンプル
基本形
アニメーションなしアコーディオン
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
開閉時アニメーション付きアコーディオン
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
他のアコーディオンを閉じる
開閉時アニメーション付きアコーディオン(最大1つまでしか開かない)
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
開閉時アニメーション付きアコーディオン(最大1つまでしか開かない)
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
開閉時アニメーション付きアコーディオン(最大1つまでしか開かない)
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
URLハッシュに応じて開く
ハッシュ値(#default_open)が付いている場合、ページロード時に予め開いておくアコーディオン
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
実装上の考慮事項
details,summary要素を使用します。- アニメーションを設定したり、ページロード時の開閉状態や開くアコーディオンの個数を制限する場合には、JSが必要になります(これらが不要な場合はJSは不要です)。
-
アニメーションを設定する際、高さを変化させる要素と
paddingをつける要素はそれぞれ別になるように注意してください。高さの計算時にpaddingが考慮されません。 -
details要素内のテキストは、display: none;で非表示にされた要素とは異なり、ページ内検索の対象となります。 -
data-details-groupで囲むと、そのグループの中で一つだけ開けるようになります。 - ハッシュ付きのリンクでアクセスすると、ページロード時に対象のdetailsを開きます。例えば、#default_openにリンクするとidがdefault_openであるダイアログを開きます。(ただし、同一ページ内でのアンカーリンクではページロードが発生しないため、この例ではリロードが必要です。)
アクセシビリティ上の考慮事項
- キーボード(EnterまたはSpace)でも操作できることを確認してください(達成基準 2.1.1 キーボード (レベル A))。
-
フォーカスインジケータが正しく表示されることを確認してください(達成基準 2.4.7 フォーカスの可視化 (レベル AA))。(特に
overflow: hidden;を使用している場合、フォーカスインジケータが隠れてしまうことがあります) -
スクリーンリーダーで、ボタンであることが伝わること、および開閉状態が伝わることを確認してください
(達成基準 4.1.2 名前 (name)・役割 (role) 及び値 (value) (レベル A))。 -
ユーザーがアニメーションを無効にできるようにしてください(達成基準 2.3.3 インタラクションによるアニメーション (レベル AAA))
-
この例では
prefers-reduced-motionを参照することで実現しています。
-
この例では