jQueryのtoggleの使い方を解説！アニメーションするWebページを作ろう

システム
エンジニア

メニューをクリックすると表示されたり非表示になるメソッドについて教えてください。

プロジェクト
マネージャー

toggleメソッドですね。アコーディオンメニューと言います。では実際のコードを見ていきましょう。

jQueryのtoggleとは？

jQueryはJavaScriptで利用できる多機能なライブラリです。その中のtoggleメソッドはhtmlの部品を、ユーザの操作で表示したり消したりといった動作をさせたい時に、簡単で便利に使えます。この記事でtoggleメソッドの機能を色々と紹介します。

この記事のサンプルを利用する場合は、htmlファイルのheadタグ内で以下のようにjQueryのライブラリを設定してください。なおjQueryは定期的にバージョンアップされるので、最新版かどうかを常にチェックしましょう。

<script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>

toggleメソッドの簡単なサンプル

それではシンプルな例でtoggleを使ってみましょう。htmlが以下のようになっているとします。

タイトル

button

<h2>タイトル</h2>
<button>button</button>

jQueryは以下のようにscriptタグ内に記述します。

$(document).ready(function(){
    $(‘button’).click(function() {
        $(‘h2’).toggle();
    })
});

toggleで簡単に表示・非表示の切替ができる

jQueryではdocumentや’button’の部分はセレクタ、ready、click、toggleはメソッドと言います。documentはページ全体を表し、readyでそれが表示された後にfunctionの処理を行います。

その中ではbuttonがクリックされるとclickメソッドのfunctionが実行され、h2タグに対しtoggleを呼んでいます。これを実行するとh2タグのタイトルとボタンが表示され、ボタンを押すとタイトルが出たり消えたりします。

toggleを使わずに同じことをする場合は、show()とhide()をif文で切り替えて呼ぶJavaScriptのコードを書く必要がありますが、jQueryならこんなに簡単にできるのです。

パラメータ指定で簡単にアニメーションできる

上のサンプルのtoggleに、1000というパラメータを追加してみましょう。

$(‘h2’).toggle(1000);

これで実行すると、ボタンを押すと1000ミリ秒かけてアニメーションしながらタイトルが出たり消えたりします。これをjQueryを使わずにJavaScriptで作るのは大変手間がかかりますが、jQueryのtoggleならこんなに簡単に実現できます。

toggleの終了処理の指定もできる

toggleメソッドはパラメータにさらにfunctionを指定することができます。functionには表示・非表示が終わった後に実行したい処理を記述できます。jQueryを以下のように書き換えてみましょう。

$(document).ready(function(){
$(‘button’).click(function() {
$(‘h2’).toggle(1000, function() {
alert(“toggle finish!”);
});
})
});

これを実行するとアニメーションが終わった後にポップアップウィンドウが表示されます。

デフォルトのパラメータも使える

toggleには最初から用意されたアニメーション用のパラメータがあります。例えば以下のようにするとゆっくりとアニメーションします。

$(‘h2’).toggle(‘slow’);

以下は速くなります。

$(‘h2’).toggle(‘fast’);

以下はデフォルトのアニメーション動作です。

$(‘h2’).toggle(‘swing’);

以下は指定されたミリ秒数で、緩急を付けずに等速でアニメーションします。

$(‘h2’).toggle(1000, ‘linear’);

fadeToggleについて

jQueryにはtoggleメソッドに似たメソッドが3つあります。まず1つ目はfadeToggleです。ここまでのサンプルのtoggleをfadeToggleに置き換えましょう。

$(‘h2’).fadeToggle();

実行すると、文字がスッと出たり消えたりします。toggleメソッドと同じようにミリ秒や’slow’などを指定することもできます。

$(‘h2’).fadeToggle(2000);

$(‘h2’).fadeToggle(‘slow’);

toggleClassについて

次のtoggleClassは今までと少し使い方が違います。まずここまでのサンプルに、以下のCSSを追加してください。

<style>
.txtRed{
color:red;
}
</style>

そしてtoggleを以下のように置き換え、パラメータは追加したCSSのtxtRedを指定します。

$(‘h2’).toggleClass(‘txtRed’);

実行してボタンを押すと、タイトルの文字が赤くなり、もう一度押すと黒に戻ります。このようにtoggleClassはCSSの適用・非適用の切り替えが可能です。CSSと組み合わせることで色々なことができるでしょう。

slideToggleについて

最後にslideToggleを紹介します。今回はhtmlを以下のように変更してください。

button

<div>あいうえお<br />あいうえお<br />あいうえお</div>
<button>button</button>

そしてjQueryを以下のようにします。

$(document).ready(function(){
    $(‘button’).click(function() {
        $(‘div’).slideToggle();
    })
});

slideToggleとtoggleの違い

上のサンプルを実行してボタンを押すと、テキストがアニメーションして上方向に消えます。これはtoggle(‘swing’)と同じように見えます。それでは実際にtoggleにして見てみましょう。

$(‘div’).toggle(‘swing’);

実行してボタンを押すと、テキストが上方向に消えつつ、色が薄くなるのがわかります。slideToggleとtoggleにはそういった違いがあるということです。なおslideToggleにもミリ秒や’slow’などのパラメータを指定できます。

アコーディオンメニューを作る

toggleメソッドはアコーディオンメニューに多く利用されます。その簡単なサンプルを掲載しましょう。まずhtmlは以下のように記述してください。

<ul>
<li>
<a class=”header”>押してください</a>
<ul class=”menu”>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
</ul>
</li>
<ul>

アコーディオンメニューを手軽に実現

そしてCSSは以下のように記述してください。これでclassがmenuになっているulタグとそれ以下のliタグが消えます。

.menu {
display: none;
}

jQueryは以下のようにします。classがheaderのaタグをクリックすると、moveが呼び出されます。move内のthisセレクタはaタグで、next()はその次のulタグを意味します。それに対してslideToggleを呼び出しています。

$(document).ready(function(){
$(“.header”).click(move);

function move() {
$(this).next().slideToggle();
}
});

実行してaタグの箇所を押すと、その下のメニューが出たり消えたりします。

システム
エンジニア

表示・非表示の他に表示時間を指定することもできるんですね。

プロジェクト
マネージャー

このメソッドを理解すると簡単にアニメーションを作ることも可能です。

toggleでアニメーションするWebページを作ろう

jQueryのtoggleを紹介しましたが、ご理解頂けましたでしょうか。JavaScriptで作ると手間がかかっていたことが、jQueryのtoggleなら簡単に実現できます。

そして、意外と簡単にアニメーションするWebページを作ることができますので、toggleを活用してWebページを作成してください。