こんにちは、ライターのマサトです！
今回は、jQueryで特定のHTML要素を表示・非表示することができる「toggle()」について学習をしましょう！
この記事では、
- 「toggle()」とは？
- 基本的な使い方
- 引数を指定しよう
- 関数を指定しよう
- アニメーション設定について
という基本的な内容から、
- 複数の要素を指定してみる
- toggle()より便利なメソッド3種
などの応用的な使い方に関しても解説していきます。この記事で、「toggle()」メソッドをしっかり学習して自分のスキルアップを目指しましょう！
「toggle()」とは？
それでは、まず最初に「toggle()」メソッドについての基本的な知識から学習をしていきましょう！
「toggle()」は、対象となるHTML要素を簡単に表示・非表示することができるメソッドになります。例えば、単純なh1タグがあるとします。
<h1>サンプルタイトル</h1>
このh1要素を非表示するには「hide()」などを使い、再び表示するには「show()」などのメソッドを使うでしょう。しかし、toggle()は実行するたびに表示・非表示を繰り返す性質があるのです！
これにより、hide() / show()を1つに融合させたような効率の良いプログラミングが可能になっているのが特徴です。
さらに、アニメーション効果を付与することも可能なので、アコーディオンメニューなども簡単に実現できます。
本記事では、「toggle()」メソッドについて基本から応用技まで詳しく解説していきますのでぜひ参考にしてみてください！
基本的な使い方
ここからは、「toggle()」メソッドを実際に使いながらプログラミング手法について学んでいきましょう！
一般的な記述方法としては、【 対象要素.toggle() 】のように対象となる要素へ直接toggle()を実行すればOKです。次のサンプル例を見てください！
<body>
<h1>サンプルタイトル</h1>
<button>ボタン</button>
<script>
$('button').click(function() {
$('h1').toggle();
})
</script>
</body>
この例では、h1タグとボタン要素があらかじめ配置されていますね。ボタンをクリックすることでtoggle()が実行されるようにイベント処理を実装しているのが分かります。
h1要素に対して「toggle()」を実行することで、ボタンがクリックされるたびに表示・非表示を繰り返すわけです。
このように簡単な記述で特定の要素を表示したり非表示にすることができるのがtoggle()の大きな特徴と言えるでしょう。
引数を指定しよう
「toggle()」メソッドは、引数にミリ秒を指定することでその時間が経過するまでに表示・非表示を行うことが可能です。つまり、ちょっとしたアニメーション効果を付与することになるわけです。
記述方法としては、【 対象要素.toggle( ミリ秒 ) 】のように引数へ数値によるミリ秒を指定すれば実行できます。
次のサンプル例を見てください！
<body>
<h1>サンプルタイトル</h1>
<button>ボタン</button>
<script>
$('button').click(function() {
$('h1').toggle(2000);
})
</script>
</body>
この例は、前章のサンプルコードと同じなのですがtoggle()の引数にミリ秒を指定しているのに注目してください。
「toggle(2000)」と記述することで、2秒間かけて表示・非表示が行われるようになるわけです。引数が無しだと一瞬ですが、ミリ秒を指定することでゆっくりとアニメーションさせることが可能です。
関数を指定しよう
先ほどは「toggle()」メソッドの引数にミリ秒を指定しましたが、さらに第2引数に関数を指定することも可能です！
toggle()による表示・非表示が完了した時点で、指定した関数の処理が行えるようになるので便利です。
一般的な記述方法は、【 対象要素.toggle( ミリ秒, 関数 ) 】のように引数へミリ秒と関数を指定しましょう。次のサンプル例を見てください！
<body>
<h1>サンプルタイトル</h1>
<button>ボタン</button>
<script>
$('button').click(function() {
$('h1').toggle(2000, function() {
console.log('アニメーション完了');
});
})
</script>
</body>
実行結果
アニメーション完了
注目すべきはtoggle()の引数指定です！ミリ秒を「2000」と設定し、その次に関数を指定していますよね？
関数の中身は単純な文字列を出力するだけの処理ですが、これは要素が表示・非表示されたあとに実行されます。
つまり、特定の要素を2秒間かけて表示・非表示にしたあと、文字列を出力する関数が実行されるというわけです！
アニメーション設定について
「toggle()」は引数にミリ秒を指定するだけでなく、標準で用意されたアニメーション設定を行うことも可能です。
これは、あらかじめ設定された文字列を引数に利用することで表示・非表示のアニメーションを行えるものです。一般的に、次の文字列を使います。
- 【 fast 】：素早く非表示にする
- 【 slow 】：ゆっっくり非表示にする
- 【 swing 】：デフォルトの非表示スタイル
- 【 linear 】：一定の速度で非表示にする
これらの文字列を使ったサンプル例を見てみましょう！
<body>
<h1>サンプルタイトル</h1>
<button id="one">ボタン１</button>
<button id="two">ボタン２</button>
<script>
$('#one').click(function() {
$('h1').toggle('slow');
})
$('#two').click(function() {
$('h1').toggle(1000, 'linear');
})
</script>
</body>
この例では、h1要素と2つのボタンが配置されています。「ボタン１」は「toggle(‘slow’)」と記述されており、ゆっくりなスピードで表示・非表示を行います。
「ボタン２」は「toggle(1000, ‘linear’)」と記述されており、1秒間かけて一定の速度で表示・非表示を行います。
このように、簡単な文字列を扱うだけでユニークなアニメーション設定ができるという点を覚えておきましょう！
複数の要素を指定してみる
これまで「toggle()」を使って1つのHTML要素を表示・非表示してきました。今度は、複数のHTML要素を一度に指定してみましょう！
考え方はこれまでと同じで、セレクタ指定を複数の要素になるように設定するだけでOKです。次のサンプル例を見てください！
<body>
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ul>
<button>ボタン</button>
<script>
$('button').click(function() {
$('li').toggle('slow');
})
</script>
</body>
この例では、あらかじめリスト要素とボタンが配置されていますね。
ボタンをクリックしたら、リスト要素を全体的に表示・非表示するように処理しています。ポイントは、セレクタ指定で「$(‘li’)」のようにli要素をすべて含めるカタチで記述するという点です。
あとはtoggle()を実行すれば、すべてのリスト要素が対象となり表示・非表示を行うことができるというわけです！
toggle()より便利なメソッド3種
これまで「toggle()」メソッドについて紹介してきましたが、jQueryには他にも類似メソッドがいくつか存在しています。
そこで、一般的によく使われる「fadeToggle()」「toggleClass()」「slideToggle()」について詳しく見ていきましょう！
これらを上手く活用することで、さらにtoggle()系の処理を効率よくプログラミングできるようになりますよ。
fadeToggle()の使い方
まずは、「fadeToggle()」について見ていきましょう！「faceToggle()」は、じわ～っと表示・非表示を実行してくれるメソッドでフェードイン・アウトのようなアニメーションになります。
記述方法はこれまでと同様で、【 対象要素.fadeToggle() 】のように対象となる要素へfadeToggle()を実行するだけで実現できます。
次のサンプル例を見てください！
<body>
<h1>サンプルタイトル</h1>
<button>ボタン</button>
<script>
$('button').click(function() {
$('h1').fadeToggle();
})
</script>
</body>
この例では、h1要素とボタンが配置されていますね。ボタンをクリックすると、h1要素に対してfadeToggle()が実行されるようにイベント処理を実装しています。
実際に実行してみると分かりますが、h1要素がゆっくりフェードイン・アウトを行いながら表示・非表示を繰り返します。
もちろん、toggle()と同様にミリ秒の指定や「linear」などの文字列によるアニメーション設定も可能です。
//ミリ秒を指定した例
$('h1').fadeToggle(3000);
サイトの特色に合わせて、toggle()を使ったアニメーションと使い分けると良いでしょう。
toggleClass()の使い方
次に、「toggleClass()」について見ていきましょう！「toggleClass()」は、対象となる要素のclass属性値を追加したり削除したりを繰り返すことが可能なメソッドになります。
つまり、スタイルシートであらかじめclassを作っておくことで特定の要素に追加・削除を簡単に行えるわけです。
一般的な記述方法は、【 対象要素.toggleClass( class属性値 ) 】のように引数へclass名を指定するだけでOKです！例えば、次のようなスタイルシートがあるとします。
.mytoggle {
display: none;
}
これは、単純にdisplayを「none」に設定することで特定の要素を非表示にするだけのclassになります。
このclassを活用したサンプル例は次のとおりです！
<body>
<h1>サンプルタイトル</h1>
<button>ボタン</button>
<script>
$('button').click(function() {
$('h1').toggleClass('mytoggle');
})
</script>
</body>
この例では、ボタンをクリックすることでh1要素に対してtoggleClass()を実行しています。「toggleClass(‘mytoggle’)」と記述することで、先ほど作成したclass属性値「mytoggle」をh1要素に追加することになります。
つまり、ボタンをクリックするとh1要素が「display: none」になるので非表示となるわけです。
そして、もう1度クリックするとclass属性値が削除されるので再び表示されるという仕組みになっているわけです。
もちろん、表示・非表示以外にもカラーを変えたり配置を変えるなど、さまざまな応用ができるのもtoggleClass()の特徴と言えるでしょう。
slideToggle()の使い方
最後に、「slideToggle()」についてご紹介しておきます！「slideToggle()」は、特定の要素を縦方向にアニメーションしながら表示・非表示することができます。
つまり、アコーディオンメニューのような効果を簡単にサイトへ組み込める便利なメソッドと言えるでしょう。次のサンプル例を見てください！
<body>
<h1>サンプルタイトル</h1>
<button>ボタン</button>
<script>
$('button').click(function() {
$('h1').slideToggle();
})
</script>
</body>
この例では、ボタンをクリックするとh1要素に対してslideToggle()を実行します。
実際に実行すると、h1要素が縦方向にアニメーションしながら非表示されたり再び表示されたりするのが分かります。
ちなみに、slideToggle()も「ミリ秒」や「文字列によるアニメーション設定」ができるのはtoggle()と同じです。
まとめ
今回は、jQueryで特定のHTML要素を削除することができる「toggle()」について学習をしてきました！最後に、もう一度ポイントをおさらいしておきましょう！
- toggle()は特定の要素を表示・非表示することができる
- 引数にミリ秒や文字列によるアニメーション設定を行うことができる
- 類似メソッドとして、slideToggle() / fadeToggle() / toggleClass()がある
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
