前々回のdetails要素と前回のgrid-template-rowsの合わせ技です。
blog.kimizuka.org
blog.kimizuka.org
details要素の開閉にアニメーションを設定したい場合、本当はopen属性の有無で子要素のgrid-template-rowsを変更することで、JavaScriptなしで実現できそうなものなのですが、残念ながら、現状ではopen属性の有無でプロパティを変化させる際、transitionを設定してもアニメーションしないのでJavaScriptの力が必要となります。
DEMO
ソースコード
javaScript
const details = document.querySelector('[data-is-open]'); const duration = 200; // CSSのtransitionに合わせる details.addEventListener('click', (evt) => { evt.preventDefault(); // details要素のデフォルトの挙動(open属性のトグル)を止める if (details.open) { details.dataset.isOpen = false; setTimeout(() => { // データ属性を変更してからopen属性を外す details.removeAttribute('open'); }, duration); } else { details.setAttribute('open', 'open'); setTimeout(() => { // open属性を付けてからデータ属性を変更する details.dataset.isOpen = true; }, duration / 2); } });