jQueryを使ってアコーディオンを実装する方法を解説します。コードはコピペOKなので、ご活用ください。
関連記事：【コピペ可】アコーディオンをCSSだけで作る【2パターンの実装方法】
目次
jQueryでアコーディオンを作る方法
アコーディオンはjQueryを使うことで非常にシンプルに実装することができます。
まずはコードを見てみましょう。HTML、CSS、jQueryは下記の通りです。
<div class="accordion">
<button class="accordion__summary">アコーディオンの見出し</button>
<div class="accordion__detail">
<p class="accordion__text">アコーディオンの中身</p>
</div>
</div>.accordion {
margin: 2em 0;
}
.accordion__summary {
background-color: #b2e5ff; /* 見出しの背景色 */
position: relative;
cursor: pointer;
padding: 10px 38px 10px 10px;
width: 100%; /* 見出しの横幅 */
font-size: 1em; /* 見出しの文字サイズ */
font-weight: bold; /* 見出しの太さ */
appearance: none; /* buttonのスタイルリセット */
border: none; /* buttonのスタイルリセット */
text-align: start; /* buttonのスタイルリセット */
}
.accordion__summary::after {
content: "+";
font-size: 1.4em; /* 記号のサイズ */
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.accordion__summary--open::after {
content: "−";
}
.accordion__detail {
display: none;
padding: 4px 10px;
margin: 10px 0;
}
.accordion__text {
margin: 0;
}$(function () {
$('.accordion__summary').click(function () {
$(this).toggleClass('accordion__summary--open');
$('.accordion__detail').slideToggle();
});
});コードの解説
.slideToggle()で表示・非表示を切り替え
このアコーディオンはjQueryの.slideToggle()メソッドを使うことで簡単に実装できます。
.slideToggle()は要素の表示・非表示を行えるメソッドで、表示されている状態からは非表示に、表示されていない状態からは表示にと要素の状態を切り替えます。
上述のコードでは、アコーディオンの中身部分である.accordion__detailにdisplay: none;をかけておき、デフォルトの状態を非表示にしています。これを書かない場合、開いた状態からスタートするアコーディオンになります。
なお、.slideToggle()は引数に数値（ミリ秒）を書くことでアニメーションの速度を設定できます。デフォルトは400ミリ秒です。
.toggleClass()で記号を切り替え
右端のプラスマイナスを表示・非表示に応じて切り替えるために、.toggleClass()メソッドを使用しています。
これは.slideToggle()と同じくトグル（2つの状態を交互に切り替える）を実行するメソッドで、具体的にはクラスのつけ外しをおこないます。
これによりアコーディオンが開いているときにだけ記号をマイナスに上書きしています。