クリックで開閉するアニメーション付きアコーディオン【CSS/JavaScript/jQuery】

クリックするとアニメーションしながら開閉する折りたたみ要素の実装方法です。
今回は主に<details>（詳細折りたたみ要素）とJavaScriptを使って実現する方法を紹介します。

他の方法と比較してメリットも多いのでぜひ使ってみてください。

【推奨】<details>要素をJavaScriptでアニメーションさせる方法
その他の方法で実現するアコーディオンアニメーション
実装方法による特徴やメリット・デメリット等のまとめ

【推奨】<details>要素をJavaScriptでアニメーションさせる方法

<details>（詳細折りたたみ要素）とは

<details>は「詳細折りたたみ要素」と呼ばれるHTML5で追加された要素で、HTMLのみでも開閉可能な「詳細説明」を表しています。

子要素に<summary>で概要（ラベル）を指定し、続けて詳細説明を書きます。概要（ラベル）は省略することができ、省略した場合多くのブラウザでは「詳細」と表示されます。

初期状態では閉じていますが<details open>のようにopen属性を付けると最初から開いた状態で表示されます。

See the Pen Untitled by web-souko (@web-souko) on CodePen.

参考リンク
MDN Web Docs – <details>: 詳細折りたたみ要素

<details>要素を使うメリット

HTMLタグだけで詳細折りたたみ要素と分かるためソースの可読性も良い。
Tab移動やEnterによる開閉等、キーボード操作にも標準で対応。
閉じていてもページ内検索の対象となる。

JavaScriptで開閉動作にアニメーションを付ける

<details>要素の開閉動作はCSSアニメーションではうまく動かないため、ここはJavaScriptで補います。

今回は開閉部分を<div>で囲い、.details__contentというクラス名を付けています。この要素に対してJavaScriptでWeb Animations APIを操作してアニメーションさせます。

See the Pen Accordion animation – JS by web-souko (@web-souko) on CodePen.

参考リンク
MDN Web Docs – ウェブアニメーション API

回転する三角アイコンはCSSのみでアニメーションさせていますが、動きに関する部分を分離するという観点ではJavaScriptにまとめたほうが良いかもしれません。

その他の方法で実現するアコーディオンアニメーション

<details>要素のopen属性をきっかけにしたCSSアニメーションは不安定

開いたときに付与されるopen属性の有無でCSSアニメーションさせようという方法ですが、この方法はうまく動きません（2023.02.28現在）。

アニメーションする場合としない場合があり、閉じる際のアニメーションは効きません。今後改善されることを期待して一応CSSの紹介だけしておきます。

CSSのみでは高さを取得できませんがline-heightを使うことで展開される部分の高さをアニメーションさせています。高さを指定しないのでコンテンツ量に応じた高さまで伸びて止まります。この場合、opacityはline-heightと時間差をつけないと効果が体感できないので注意です。

See the Pen Accordion details + animation by web-souko (@web-souko) on CodePen.

jQueryで付与したクラス名とCSSによるアコーディオン

open属性をきっかけにしたCSSアニメーションではうまく動かないため、jQueryのtoggleClass()を使って付与したクラス名をきっかけにしたパターンですが、<details>要素ではうまく動きません。しかし<details>以外の要素を動かす場合は有効なため一応紹介しておきます。

toggleClass()は指定の要素に任意のクラス名が無ければ付与し、既にある場合は削除するメソッドです。toggleClass()で付与するクラス名.activeの有無によって適用するCSSを切り替えています。右端の三角アイコンもCSSで再現してみました。

See the Pen Accordion animation – jQuery+CSS by web-souko (@web-souko) on CodePen.