アコーディオン

サンプル

アニメーションなしアコーディオン

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

開閉時アニメーション付きアコーディオン

開閉時アニメーション付きアコーディオン（最大1つまでしか開かない）

ハッシュ値（#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を参照することで実現しています。