アコーディオンの実装

2023年5月現在、全てのモダンブラウザは<details>と<summary>タグを利用することができるようになりました。これらのタグを利用することで、アコーディオン機能をアクセシビリティを保ちながら実現することができます。

スタイルなし

See the Pen by sushat4692 (@sushat4692) on CodePen.

スタイル適用

See the Pen by sushat4692 (@sushat4692) on CodePen.

アニメーション付き

補足

この例ではWeb Animation APIを利用していますが、jQueryのアニメーションを使っても問題ありません。

See the Pen by sushat4692 (@sushat4692) on CodePen.