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

クリックするとアニメーションしながら開閉する折りたたみ要素の実装方法です。
比較的新しい要素の<details>を使う方法や、jQuery・CSSを使う方法等を紹介します。

その1:<details> 要素によるアコーディオン

<details>(詳細折りたたみ要素)とは

<details>は「詳細折りたたみ要素」と呼ばれるHTML5で追加された要素で、HTMLのみでも開閉可能な「詳細説明」を表しています。子要素に<summary>で概要(ラベル)を指定することができ、省略した場合多くのブラウザでは「詳細」と表示されます。

HTMLタグだけで詳細折りたたみ要素と分かるためソースの可読性も良くキーボード操作にも標準で対応しています。閉じていてもページ内検索の対象となることも便利です。

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

<details>
	<summary>detailsのデモ01</summary>
	&lt;details&gt;タグはHTMLのみでも開閉可能です。
</details>

<details open>
	<summary>detailsのデモ02</summary>
	最初から開いた表示も可能です。
</details>

<details>
	summaryを省略した場合の表示はブラウザに依存します。
</details>
detailsのデモ01 <details>タグはHTMLのみでも開閉可能です。
detailsのデモ02 最初から開いた表示も可能です。
summaryを省略した場合の表示はブラウザに依存します。

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

CSSによる装飾とアニメーション

CSSのみでは高さを取得できませんがline-heightを使うことで展開される部分の高さをアニメーションさせています。高さを指定しないのでコンテンツ量に応じた高さまで伸びて止まります。

この場合、opacityline-heightと時間差をつけないと効果が体感できないので注意です。

2022.08.31現在、CSSのみのアニメーションではアニメーションする場合としない場合があるようです。閉じる際のアニメーションは効きません。
今後改善されることを期待しています──。

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

その2:jQueryのslideToggle()を使ったアコーディオン

slideToggle()の使い方

slideToggle()は実行される度に指定の要素が開閉するjQueryメソッドです。
数行のjQueryで簡単に実装できるので便利ですが、実際には連続して変形させる重めの処理を行っています。

後述のtoggleClass()と合わせてCSSアニメーションを追加することもできます。

<details>をslideToggle()で動かそうとするとうまく動きません──。
それ以外の要素の場合はslideToggle()が使えます。

slideToggle()によるアニメーション

ラベル.details__summaryがクリックされる度にラベル直後の要素.details__contentに対してslideToggle()が実行されます。最低限のアコーディオンアニメーションであればこれだけで実現できます。

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

その3:jQuery(きっかけのみ)とCSSによるアコーディオン

開閉のきっかけをjQueryで行う

JavascriptではjQueryのtoggleClass()を使ってクラス名の追加と削除のみ行います。
toggleClass()は指定の要素に任意のクラス名が無ければ付与し、既にある場合は削除するメソッドです。

jQueryとCSSで行う開閉アニメーション

右端の三角アイコンもCSSで再現してみました。

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

その4:CSSのみで実現するアコーディオン

チェックボックスで開閉状態を切り替える

<input type="checkbox">を使って開閉状態を切り替えます。
CSSの疑似クラス:checkedを使ってチェックボックスがオフの場合は閉じた状態、オンの場合は開いた状態のスタイルを定義しています。

チェックボックスとCSSによるアニメーション

input[type=checkbox]:checked + 〇 + △のように直後の要素を表す兄弟セレクターと組み合わせることで、該当する要素のみアニメーションするようにしています。

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

まとめ

それぞれの特徴やメリット・デメリット等

  • <details>
    要素は最適だがCSSでの開閉アニメーションは不安定なため、動かす場合はjavascriptで。
  • slideToggle()
    手っ取り早く設置できるが今回の中では一番重い。
  • jQueryきっかけとCSS
    汎用性が高く負荷も少なめ。
  • checkboxとCSS
    アニメーションはCSSのみなので一番軽量。HTMLが複雑になり分かりにくい。

タイトルとURLをコピーしました