jQueryのslideToggle()のような要素をスライドしながら表示非表示切り替えるアニメーション。かつてはJSで要素の高さを取得する必要があったりCSSだけで行うとアニメーションにムラがあったり…とjQueryを使わないと何かと面倒な実装が必要でしたが、現在ではCSS2行を用意して、そのうちの1行を切り替えるだけで実装が可能です(transitionプロパティは除く)。しかも全モダンブラウザ対応済みです。 結論実装方法は至極簡単で、開閉されるパネル要素にdisplay:gridを指定し、grid-template-rowsプロパティの値を0fr↔1frに切り替えるだけです。 ※overflow:hiddenを指定した子要素1つが必要です。
![アコーディオンのスライドアニメーションはCSS2行で実装できる – TAKLOG](https://cdn-ak-scissors.b.st-hatena.com/image/square/fc8f7064954a69d6ec1bcd397e50e46405053c2c/height=288;version=1;width=512/https%3A%2F%2Fwww.tak-dcxi.com%2Fog%2Faccordion-slide-animation-can-be-implemented-in-two-line-of-css.png)