jQueryアコーディオンメニューの実装方法
最終更新日 - 公開日 2017.11.17
by
jQuery アコーディオンメニューの実装方法を紹介します。
例えば、シンプルなアコーディオンメニューを実装したいときに便利な方法です。
jQuery でアコーディオンを実装する方法
ボタンをクリックしたら開閉する仕組みのアコーディオンの実装方法を紹介します。
デモは以下になります。
全部入りのコードはこちら。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="button">ボタン</div>
<div class="accordion-block">アコーディオン</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.button').click(function() {
$(this).toggleClass('selected');
$(this).next().slideToggle();
}).next().hide();
});
</script>
</body>
</html>
紹介したコードの解説
紹介したコードを解説します。
ベースの HTML は次の通りです。
<div class="button">ボタン</div>
<div class="accordion-block">アコーディオン</div>
ベースの HTML だけではアコーディオンが開いた状態です、続けて読み込む jquery の指定でアコーディオンを閉じます。
ここでは CDN（ Google 提供）の JavaScriptライブラリ jQuery ファイルを読み込みます。
※任意のファイルがあれば適宜変更を加えてください。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>続いて、開閉のスクリプトを追加します。
ボタン要素をクリックしたときに、ボタンの次のブロック要素を開閉させます。
次のコードを HTML ファイル内に追加します。
<script type="text/javascript">
$(function(){
$('.button').click(function() {
$(this).next().slideToggle();
}).next().hide();
});
</script>
最後のコードで自動的にアコーディオンを閉じる状態にしています。
コードを外部ファイルに追加する場合はこちら。内容は同じです。
$(function(){
$('.button').click(function() {
$(this).next().slideToggle();
}).next().hide();
});
続いて、紹介するコードをさらに詳しく紹介します。
ボタンを押した時にクラスを付与する方法
ボタンを押した時にクラスを付与する場合は toggleClass() を使用します。
例えば、ボタンをクリックしたらボタンにクラス selected を付与場合は、
toggleClass() を追加します。
<script type="text/javascript">
$(function(){
$('.button').click(function() {
$(this).toggleClass('selected');
$(this).next().slideToggle();
}).next().hide();
});
</script>
クラス名を変更する場合は selected 部分を自由に変更してください。
アコーディオンの開閉スピードを変更する方法
アコーディオンの開閉スピードを変更する場合は slideToggle() に値を指定します。
開閉スピードは基本の三段階（slow,normal,fast）と時間をミリ秒単位で指定する方法が選べます。
値の指定がなければ normal が設定されます。
例えば任意の時間を指定する場合は値に 3000（3秒）と指定することもできます。
<script type="text/javascript">
$(function(){
$('.button').click(function() {
$(this).toggleClass('selected');
$(this).next().slideToggle(3000);
}).next().hide();
});
</script>
アコーディオンに閉じるボタンを追加する方法
開閉メニューとは別に「閉じるボタン」を追加する方法を紹介します。
「閉じるボタン」は開閉コンテンツ内に設置することを前提に話を進めます。
まずベースの HTML は次の通りです。
<div class="button">ボタン</div>
<div class="accordion-block">アコーディオン
<div class="close">閉じるボタン</div>
</div>
「閉じるボタン」は必ずアコーディオンコンテンツ内（accordion-block）に追加してください。
jQuery は次の通りです。
$(function(){
$('.button').click(function() {
$(this).toggleClass('selected');
$(this).next().slideToggle();
}).next().hide();
$('.close').click(function() {
$(this).parent().prev().toggleClass('selected');
$(this).parent().slideToggle();
});
});
最初の開閉ボタンにクラスの付与を追加している場合を想定して解説します。
「閉じるボタン」に必要な動作は以下の二点。
・開閉ボタンに付与したクラスの削除
・アコーディオンを閉じる
クラスの削除は「閉じるボタン」の親要素（parent）の一つ前の要素（prev）を指定してクラスを削除。
アコーディオンは「閉じるボタン」の親要素（parent）の accordion-block を閉じます。
パソコンは全開、スマホは開閉させたい場合の実装方法
アコーディオンをパソコンでは全開、スマートフォンでは開閉させたい時があります。
そういった場合には、先に紹介したコードに少し手を加える形で実装することができます。
全部入りのコードはこちら。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
.button{
pointer-events: none;
}
@media screen and (max-width: 640px){
.button{
pointer-events: all;
}
.accordion-block{
display: none;
}
}
</style>
<div class="button">ボタン</div>
<div class="accordion-block">アコーディオン</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.button').click(function() {
$(this).toggleClass('selected');
$(this).next().slideToggle();
})
});
</script>
</body>
</html>
CSSの pointer-events: none; で、パソコンはボタンのクリックイベントを停止。
メディアクエリの分岐でスマートフォンはクリックイベントを有効化してアコーディオンを非表示にします。
<style>
.button{
pointer-events: none;
}
@media screen and (max-width: 640px){
.button{
pointer-events: all;
}
.accordion-block{
display: none;
}
}
</style>
先に紹介していた方法から jquery 内でのアコーディオンの非表示処理を削除。
表示・非表示の有無を CSS で切り替えるようにします。
<script>
$(function(){
$('.button').click(function() {
$(this).toggleClass('selected');
$(this).next().slideToggle();
})
});
</script>まとめ
jQuery アコーディオンメニューの実装方法を紹介しました。
