HTML、CSS、jQueryでアコーディオン（折りたたみ）をつくる
この記事は、最初の投稿から4年以上が経過しています。
最終更新から1509日が経過しています。
「Webサイトにアコーディオン(折りたたみ)をつくりたい」
「アコーディオン(折りたたみ)はどうやってつくるのがいいの？」
こんな悩みにお答えします｡
私は､2015年からWeb制作の仕事をはじめて､160件ほどのWebサイトを制作してきました｡
これまでアコーディオン(折りたたみ)は､jQueryでつくることが多かったですが､今ではHTML「details + summary」やCSSでつくることが多くなってきました｡
この記事では､以下のことがわかります｡
- アコーディオン(折りたたみ)つくる方法
- それぞれの特徴やメリット､デメリット
記事を読み終えると､いろいろな方法でアコーディオン(アコーディオンメニュー)をつくることができるようになります｡
アコーディオン(折りたたみ)をつくる方法
HTML (details + summary)
HTML5でdetails､summaryが追加されて､CSSも使うことなくアコーディオンがつくれるようになりました｡
デザインや動作の細かいところはCSSなどでカスタマイズが必要ですが､最低限の動きはHTML5だけで実現できるのでとても便利です｡
See the Pen HTMLのみで折りたたみ(デフォルト) by hashi84 (@hashi84) on CodePen.
ただし､当然というべきかIEには対応していないのでpolyfillが必要です｡
読み込んでおくだけで特別なオプション指定はありません｡
<script src="https://cdn.jsdelivr.net/npm/details-polyfill@1.1.0/index.min.js"></script>
- メリット
- CSSやJavaScriptを使うことなくHTMLだけで最低限の開閉ができる｡
- デメリット
- IE対応にはpolyfillが必要｡
CSS (checkbox + label)
CSSでもアコーディオンの動きを実現できます｡
ただし､実現するためのHTML構造が複雑になってくるのでHTMLソースがわかりにくくなってしまいます｡
わかりやすいようにチェックボックスが見えるようにしてありますが､実際の案件では「display:none;」で非表示にしてください｡
See the Pen CSSで折りたたみ(シンプル) by hashi84 (@hashi84) on CodePen.
- メリット
- JavaScriptを使うことなくHTMLとCSSだけで最低限の開閉ができる｡
- デメリット
- 実際には表示させないcheckboxを使うので､HTML構造がわかりにくくなる｡
jQuery
slideToggle
jQueryでもアコーディオンのつくり方はいろいろありますが､開閉の動きだけならslideToggleを使うのがいちばん簡単です｡
See the Pen jQueryで折りたたみ(slideToggle) by hashi84 (@hashi84) on CodePen.
slideToggleを使うと開閉時にアイコンを切り替えなどが必要な場合に､開閉状態を判定するプログラムを追加しないといけないので､かえって複雑になり動作も重くなります｡
- メリット
- 比較的簡単なプログラムで開閉ができる｡
- デメリット
-
- jQueryを使うので読み込み速度が遅くなり､動作も重くなる｡
- slideToggleだと開閉状態の判定ができないので､別のプログラムが必要になる｡
toggleClass
開閉時にアイコンを切り替えなどが必要な場合は､toggleClassを使うことで動作の判定に連動した動きをつくることができます｡
See the Pen jQueryで折りたたみ(toggleClass) by hashi84 (@hashi84) on CodePen.
親要素のclassに「open」を追加､削除することで､開いているときのCSS､閉じているときのCSSを切り替えればアコーディオンを実現できます｡
class名はopenにかぎりません
- メリット
- jQueryで操作するのが親要素のclass変動だけなので､開閉時の動きやデザインをCSSで操作しやすい｡
- デメリット
-
- jQueryを使うので読み込み速度が遅くなり､動作も重くなる｡
jQueryの導入手順はこちらの記事で解説しています｡
【WordPress】jQueryの導入手順（読み込み、使い方）【JavaScript】
「jQuery」のはじめかたについて知りたいですか？この記事では「jQuery」の使い方（読み込み、書き方、チェック方法）について解説しています。あわせて、WordPressでの使い方についても解説します。ぜひご覧ください。
まとめ
アコーディオン(折りたたみ)をつくる方法について解説しました｡
- HTML (details + summary)
- CSS (checkbox + label)
- jQuery (slideToggle)
- jQuery (toggleClass)
応用すればアコーディオンメニューやハンバーガーメニューもできます｡
同じような機能ですが､マウスオーバーでメニューを開閉する方法をこちらの記事で解説しています｡
ホバー・マウスオーバーでメニューを開く方法【JavaScript】【jQuery】
マウスオーバーでサブメニューを表示する方法を知りたいですか？この記事では、JavaScript、jQueryを使ったマウスオーバーでサブメニューを表示する方法を紹介しています。ぜひご覧ください。
