jQuery

jQuery を使ったアコーディオンの実装方法

jQuery を使ったアコーディオンの実装方法を紹介します。
例えば、シンプルな作りのアコーディオンメニューを実装したい時に便利な方法です。

  1. jQuery でアコーディオンを実装する方法
    1. ボタンを押した時にクラスを付与する方法
    2. アコーディオンの開閉スピードを変更する方法
  2. パソコンは全開、スマホは開閉させたい場合の実装方法

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>

ボタンをクリックしたらアコーディオン部分が開閉します。

続いて jquery のファイルを読み込みます。
Google が提供している CDN を使った 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>

別ファイルの javascript に追加する場合はこちら。

$(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>

パソコンは全開、スマホは開閉させたい場合の実装方法

アコーディオンをパソコンでは全開、スマートフォンでは開閉させたい時があります。
そういった場合には、先に紹介したコードに少し手を加える形で実装することができます。
全部入りのコードはこちら。

<!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 を使ったアコーディオンの実装方法を紹介しました。

この記事をシェアする