gridでアコーディオンメニューの実装

はじめに

今回は、アコーディオンの開閉部分をgridでおこなう方法があることを知ったので、備忘録として記事にしました。

（私が知ってた）今までの実装

See the Pen accordion height by chisato (@mgkita) on CodePen.

１．コンテンツの高さ（.accordion__body部分）に初期値としてheight: 0px;をcss設定し、コンテンツが表示されないようにする。

.accordion__body {
  height: 0px;
  overflow: hidden;
  transition: height 0.2s ease-out;
}

さらにoverflow: hidden;をつけることで、高さ（height: 0px;）を超えるコンテンツ（accordion__text部分）を表示しないようにしています。

２．JSでクリック時のコンテンツの高さを計算することでアコーディオンを開閉させる。

if (content.style.height) {
  content.style.height = null;
} else {
  content.style.height = content.scrollHeight + 'px';
}

コンテンツ要素の高さ（height）をチェックし、値が存在する場合はnullに設定。
存在しない場合はコンテンツの実際の高さ（scrollHeight）に設定します。

これで、アコーディオンの開閉ができるようになります。

gridでの実装

See the Pen accordion grid by chisato (@mgkita) on CodePen.

１．.accordion__bodyにdisplay: grid;を設定、grid-template-rowsプロパティを使用して、コンテンツの行の高さを制御する。

.accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease-out;

  &[aria-hidden="false"] {
    grid-template-rows: 1fr;
  }
}

.accordion__inner {
  overflow: hidden;
}

初期状態は、grid-template-rows: 0fr;とすることでコンテンツを非表示。
[aria-hidden="false"]でgrid-template-row: 1fr;とすることで高さがつき、開閉するようになってます。

[aria-hidden="false"]は、WAI-ARIAとよばれるアクセシビリティを考慮した仕様のなかで定義されているaria属性のひとつ

	コンテンツが閉じている状態	コンテンツが開いている状態
aria-expanded（ボタン側）	false	true
aria-hidden（コンテンツ側）	true	false

ボタン側でもaria-expandedで制御先（コンテンツ側）が展開しているかどうかの設定が必要なため、JSで設定をおこなっています。

今回で属性で開閉させるアクセシビリティを考慮した実装についても知ったので、このあたりについてはまた別で記事にできればと思います。

おわりに

アコーディオンひとつとっても実装の仕方は色々あって、どれを採用するかは求められているものによるんだろうなと感じました。（アニメーションの有無や、アクセシビリティにどれだけ力を入れるかなど）

ただheightを使って高さを出すやり方だと、style属性でのつけ外しでHTMLタグに空のstyle属性がつくことや、JSでheightの計算をしないといけないところを、gridだとCSSだけで高さ問題が解決するのは大きな学びとなりました。

以下参考資料
https://keithjgrant.com/posts/2023/04/transitioning-to-height-auto/