【jQuery】コピペで使える！アコーディオンメニューの作り方
- 記事をシェアする：
-
-
-
今回は、jQueryを用いてよりシンプルにアコーディオンメニューを実装する方法を解説します。
様々な記事で実装方法が紹介されていますが、この記事は、
「できるかぎり簡単な方法で実装したい」「カスタマイズができるアコーディオンメニューを作りたい」
といった方向けです。
コピペで使用可能です。担当されている案件のデザインに合わせてご使用ください。
デモ：完成のイメージ
まずは、簡単なデモをご覧ください。
各メニューをクリックすると、対応するメニューの内容が開閉します。
ソースコード解説
上記デモに使用したソースコードを、HTML、CSS、jQueryに分けて解説していきます。
HTMLの解説
アコーディオンメニューを構成するための基本的なマークアップです。以下はその構造です。
<ul class="accordion">
<!-- 各アコーディオン項目 -->
<li class="accordion__item">
<!-- ボタンにaria-expanded属性を追加して、開閉状態を示す -->
<button class="js-ac accordion__button" aria-expanded="false">メニュー1</button>
<!-- メニューの内容（初期状態では非表示） -->
<div class="accordion__content">
<p>メニュー1の内容がここに表示されます。</p>
</div>
</li>
<li class="accordion__item">
<button class="js-ac accordion__button" aria-expanded="false">メニュー2</button>
<div class="accordion__content">
<p>メニュー2の内容がここに表示されます。</p>
</div>
</li>
<li class="accordion__item">
<button class="js-ac accordion__button" aria-expanded="false">メニュー3</button>
<div class="accordion__content">
<p>メニュー3の内容がここに表示されます。</p>
</div>
</li>
</ul><ul>と<li>を使ってアコーディオンメニューのリストを作成しています。- 各項目に
<button>を使用し、クリックできるボタンを作成。aria-expanded属性を設定し、開閉状態を管理しています。 <div class="accordion__content">には、ボタンに対応するコンテンツが含まれます。
CSS（SCSS）の解説
アコーディオンメニューに必要な最低限のスタイルを定義しています。
/* ボタンのデフォルトスタイルをリセット */
button {
background: none;
border: none;
padding: 0;
font: inherit;
color: inherit;
text-align: inherit;
cursor: pointer;
outline: none;
}
/* アコーディオンメニューのスタイル */
.accordion {
&__item {
border-top: 1px solid #ccc;
/* is-openクラスが付与された場合に、内容を表示する */
&.is-open {
display: block;
}
/* 最初のアイテムのボーダーを削除 */
&:first-of-type {
border: none;
}
}
&__button {
width: 100%; /* ボタンを親要素の幅いっぱいに広げる */
padding: 10px;
font-size: 16px;
background-color: #f9f9f9;
border: 1px solid #ddd;
text-align: left;
}
&__content {
display: none; /* 初期状態では非表示 */
padding: 10px;
background-color: #f0f0f0;
border-top: 1px dashed #ccc; /* コンテンツ部分の上部に破線のボーダー */
}
}
buttonタグのスタイルをリセット：デフォルトのスタイル（背景色、ボーダー、パディングなど）を解除し、親要素からの継承を利用しています。- アコーディオンメニューのレイアウト：
accordion__buttonの幅を100%に設定して、ボタンが横幅いっぱいの判定をもつように指定しています。 - コンテンツ部分のスタイル：
.accordion__contentの初期状態では非表示にし、表示された際にスライドトグルでアニメーションが適用されます。
jQueryの解説
ここでは、アコーディオンメニューの開閉を制御しています。
$('.js-ac').click(function () {
const content = $(this).next();
// スライドトグルでアニメーションを追加
content.stop(true, true).slideToggle();
$(this).toggleClass('is-open');
// aria-expandedをトグル
const isOpen = content.is(':visible');
$(this).attr('aria-expanded', isOpen ? 'true' : 'false');
});$('.js-ac').click(function() {...})：ボタンがクリックされた際に動作します。next()：クリックしたボタンの次にあるコンテンツ部分（<div class="accordion__content">）を取得します。slideToggle()：コンテンツをスライドアニメーションで開閉します。slideToggle()でクリックしたボタンの次にあるコンテンツ部分（定数 content）を開閉します。aria-expanded：ボタンの開閉状態を管理し、アクセシビリティを向上させます。（この属性は、ユーザーに対してコンテンツが「展開されている」か「折りたたまれている」かを知らせ、視覚的には見えない状態でも支援技術（スクリーンリーダーなど）を使用しているユーザーに状態を伝えます。）
まとめ
今回は、簡単に実装できるアコーディオンメニューを作成方法を解説しました。
jQueryのスライドトグルを使うことで、cssを使用せずに滑らかな開閉も実現できます。さらに、aria-expanded属性を使用することで、アクセシビリティにも配慮しています。
コピーで使用が可能ですので、案件に合わせてカスタマイズしてご利用ください。
最後までお読みいただきありがとうございました。
それでは、また別記事でお会いいたしましょう！
