【CSS】Gridを使ったアコーディオン

一度HTMLを組んでからスルっと開くアコーディオンにしたため、
HTMLを変更したくなくて今回は details や summary ではなく、
grid を使った方のアコーディオンを実装しました。

See the Pen gridを使ったアコーディオン by なみ屋 (@marukaty) on CodePen.

コード

# HTML
<div class="accordion">
  <ul class="list-ul">
    <li class="list-li">HOME</li>
    <li class="list-li">ABOUT</li>
    <li class="list-li">WORKS</li>
    <li class="list-li">BLOG</li>
    <li class="list-li">CONTACT</li>
  </ul>
</div>
<div class="list-button">Open</div>

# CSS
.accordion {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;
}
.accordion.opened{
  grid-template-rows: 1fr;
}
.list-ul {
  overflow: hidden;
}

# JavaScript
# .openedクラスの着脱のみです
const listButton = document.querySelector('.list-button')

function toggleList() {  document.querySelector('.accordion').classList.toggle('opened')
}

listButton.addEventListener('click', toggleList)

ポイントは、開閉したいコンテンツを囲う要素(.list-ul)と、さらにその親要素(.accordion)を用意。
親要素に対してgridの各種設定をし、子要素にoverflow: hidden をつけることです。

親要素にoverflow: hidden まで全てつけてしまい、思うように動かずちょっとハマりました。