details を使ったアコーディオン
Internet Explorerではできませんでしたが、details と summary タグを組み合わせて、簡単にアコーディオンが実装できるようになっています。
Internet Explorerのサポートが終了してから、簡単なアコーディオンに採用している方もいるのではないでしょうか。
進化した点
Chrome120から、 detailsタグに name 属性がサポートされるようになりました。
これによって同じ name を持つ複数の details がセマンティックグループを形成します。
グループ化した details では、一度に開くことができる要素は1つです。
新しく details を開くと、前に開いていた details は自動的に閉じられます。
これを 排他的アコーディオン と呼ぶそうです。
なお、排他的アコーディオンは、離れていても有効です。
同じドキュメント内にあれば、離れていても同じ排他的アコーディオンとして機能します。
デモ
実際にどのような挙動をするのか、Codepenで書いてみました。
See the Pen details accordion by gilly135 (@gilly135) on CodePen.
対応ブラウザ
2023年12月時点では、残念ながらFirefoxがまだ detailsタグに name 属性がサポートされていません。
Firefoxで detailsタグに name 属性が入っていても、表示が崩れることはありませんが、排他的アコーディオンとしては機能しない状態です。
