🪗

detailsタグとsummaryタグで実装しよう！アコーディオン（開閉アニメーションつきサンプルあり）

2022/07/04に公開1件

アコーディオンとは？

こういうの。
最初は見出しのみが表示されていて、クリックすると中のコンテンツが表示されるような折りたたみ要素。

detailsタグ、summaryタグとは？

<details open>
    <summary>アコーディオンとは？</summary>
    <p>こういうの。<br>最初は見出しのみが表示されていて、クリックすると中のコンテンツが表示されるような折りたたみ要素。</p>
</details>

HTML 5.1 で勧告され、現在は HTML Living Standard で標準となっている、比較的新しいHTMLタグ。
- 主要ブラウザ（もちろんIEを除く）では問題なく使用できる。
最初に示した Zenn の折りたたみ要素もこれらのタグで表示されている。
detailsタグのopen属性の有無で開閉状態を示す。

divタグ、buttonタグのみで表現したアコーディオンの実装と、
detailsタグ、summaryタグで実装したアコーディオンのサンプルを用意しました。
どちらも機能には変わりがなく、ただ方法が異なるのみです。

JSが必要ない
- 上記のサンプルではアニメーションを実装するためにJSを使用していますが、アニメーションが必要なければブラウザが開閉処理を行ってくれるため、JSが不要です。
セマンティクス（要素の意味）を表現できる。
アクセシビリティ対応もできる
- 非表示状態のdetailsタグの中身はアクセシビリティツリーから除外される。
- 読み上げでも区別される。
  - https://accessible-usable.net/2020/06/entry_200613.html

ブラウザデフォルトのスタイルにより、 「▼」（三角マーク） が表示される。
- この三角は、 display: list-item （つまり、箇条書きリストの「●」（丸）と同じプロパティ）によって表示される。
- ただし、Safariにおいては、display: list-itemではなく、::-webkit-details-marker 擬似要素によって表示される。
- よって、三角マークを非表示にするためには、以下の2つの指定が必要になる。

summary {
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}

summary {
  cursor: pointer;
}

開閉状態によってスタイルを変化させる場合は、 details[open] で区別する。
- なお、JSでアニメーションを付ける場合はopenの付くタイミングがずれてしまう。この対策のため、上記サンプルでは閉じるためのクリック後に data-accordion-before-close という属性をつけることで、クリック直後にも閉じてた状態のスタイルを当てられるように調整している。

閉じるときのアニメーション をつけるためには、summaryのクリックイベントをpreventDefault()して、アニメーション完了後にopen属性を付与する必要がある。
- 要素が非表示になってしまうと、アニメーションのさせようがないため。
detailsの開閉時には、toggle イベントが発生する。開閉時になにかを行いたい場合に使用できる。
- https://developer.mozilla.org/ja/docs/Web/API/HTMLDetailsElement/toggle_event

実装が楽になり、かつアクセシビリティの質も向上できる、 details タグ、 summary タグをぜひ使っていきましょう！

gsapを使えば、detailsタグとsummaryタグで実装したアコーディオンでも、
heightを0からautoにできるんですね！凄く勉強になりました！