detailsタグで作ったアコーディオンをcssで良い感じにアニメーションする

公開:2021/02/16
更新:2021/02/16
1 min読了の目安(約800字TECH技術記事

こんばんわ。カレー美味しい。

ところで友人に聞かれたのでdetailsタグとsummaryタグで作るアコーディオンパネル(Q&Aとかに使うやつ)を、アニメーション付きで開閉できるようにしたいと思います😇

details/summaryタグについては以下を参照してください。便利なタグですね〜〜

https://developer.mozilla.org/ja/docs/Web/HTML/Element/details

ポイントは keyframes なアニメーションを使うこと、open属性を活用すること

早速作ってみたのでみてください😇とっても簡潔なhtmlで気持ちがいいですね!

先頭のpolyfillはIE11対策です…IE11はdetails非対応なので…👿(2021/02/16時点)
参考: Can I use... Support tables for HTML5, CSS3, etc

detailsはsummaryをクリックして開くとopen属性がつきます。
open属性がついた時に、keyframesなアニメーションを発動してあげるとええ感じにスライドします。
open属性がついたよ!

…説明は苦手なので作ったものをみてくださいね😇では!

追記※Safari、iOSのモバイルブラウザ3種で試したら初回しかアニメーションしなかった…open属性はついてるようなんですけどネ🥺もしかしたらコレのようにWebkitのバグかもしれません…そのうち直ることを祈って