details要素でスライドダウンのアコーディオンをシンプルに実装したい

FAQなどで開閉ボタンを実装したいことがあると思います。detailsやsummaryでの実装を考えましたが、よくあるスライドダウンがうまく動きませんでした。そこで調べてみたところ、CSSだけで下記のコードで実装することができました。

HTML

<details>
  <summary>Q. 質問</summary>
  A. 回答
</details>
<details>
  <summary>Q. 質問</summary>
  A. 回答
</details>

CSS

details {
  interpolate-size: allow-keywords;
  overflow: hidden;
}
details::details-content {
  block-size: 0;
  transition: block-size 0.5s, content-visibility 0.5s;
  transition-behavior: allow-discrete;
}
details:open::details-content {
  block-size: auto;
}

デモ

スムーズな開閉をするにはどうしたらいいですか？

最新のCSSを使って開閉のアニメーションを実装することができます。

なぜこれまでのmax-heightなどを使った方法ではだめなのですか？

ブラウザ側でCSSが適用されているため、あとから指定してもうまくいかないのだと思います。

参考

こちらの動画を参考にさせていただきました。ありがとうございました！

---

---

いいね!