jQuery

コピペで簡単 jQuery でアコーディオンを実装する方法

コピペで簡単 jQuery を使ったアコーディオンの実装する方法を紹介します。
例えば、シンプルな構造のアコーディオンを実装したい時に便利な方法です。

  1. jQuery でアコーディオンを実装する方法
    1. ボタンを押した時にクラスを付与する方法
    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>

まとめ

コピペで簡単 jQuery を使ったアコーディオンの実装する方法を紹介しました。

この記事をシェアする

合わせて読みたい関連記事