jQueryでのslideToggleの使い方とは？ほかのtoggle系関数との違いについても紹介！
- システム
エンジニア - jQueryでのslideToggleの使い方について教えてください。
- プロジェクト
マネージャー - 分かりました。jQueryでのslideToggleの使い方とほかのtoggle系関数との違いについても解説しましょう。
jQueryでのslideToggleの使い方とは？
今回は、jQueryでのslideToggleの使い方について説明します。slideToggleを使うと、要素の表示/非表示を切り替えられます。スピードやコールバック関数も指定可能です。ほかのtoggle系関数との違いについても紹介します。
jQueryでのslideToggleの使い方に興味のある方はぜひご覧ください。
基本的な使い方
slideToggleの基本的な使い方を紹介します。
実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>
<body>
<button>slideToggle</button>
<p>
This is jQuery slideToggle() sample.<br>
This is jQuery slideToggle() sample.<br>
This is jQuery slideToggle() sample.
</p>
</body>
</html>
|
jQueryは以下のように記述します。
|
1
2
3
4
5
|
$(function(){
$("button").click(function () {
$("p").slideToggle();
});
});
|
実行結果は以下のようになります。ボタンをクリックすると、p要素の表示/非表示が切り替わることが分かります。
See the Pen
jQuery_slideToggle1 by kskumd (@kskumd)
on CodePen.
スピード
slideToggleのスピードを変更する方法を紹介します。引数に数字を指定したり、slow/normal/fastなどを指定できます。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<div>
<button id="btn1">slideToggle(1000)</button>
<p>
This is jQuery slideToggle() sample.<br>
This is jQuery slideToggle() sample.<br>
This is jQuery slideToggle() sample.
</p>
</div>
<div>
<button id="btn2">slideToggle(normal)</button>
<p>
This is jQuery slideToggle() sample.<br>
This is jQuery slideToggle() sample.<br>
This is jQuery slideToggle() sample.
</p>
</div>
<div>
<button id="btn3">slideToggle(fast)</button>
<p>
This is jQuery slideToggle() sample.<br>
This is jQuery slideToggle() sample.<br>
This is jQuery slideToggle() sample.
</p>
</div>
|
jQueryは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$(function(){
$("#btn1").click(function () {
$('#btn1+p').slideToggle(1000);
});
$("#btn2").click(function () {
$('#btn2+p').slideToggle('normal');
});
$("#btn3").click(function () {
$('#btn3+p').slideToggle('fast');
});
});
|
実行結果は以下のようになります。表示/非表示の切り替えスピードの違いが分かるのではないでしょうか。
See the Pen
jQuery_slideToggle2 by kskumd (@kskumd)
on CodePen.
コールバック
コールバック関数を指定する方法を紹介します。slideToggle完了後のロジックを記述できます。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
|
<button>slideToggle</button>
<p>
This is jQuery slideToggle() sample.<br>
This is jQuery slideToggle() sample.<br>
This is jQuery slideToggle() sample.
</p>
<div class = "log"></div>
|
jQueryは以下のように記述します。
|
1
2
3
4
5
6
7
|
$(function(){
$("button").click(function () {
$("p").slideToggle( 'slow', function(){
$(".log").text('slideToggle() Complete');
});
});
});
|
実行結果は以下のようになります。slideToggle完了後にメッセージが表示されることが分かります。
See the Pen
jQuery_slideToggle3 by kskumd (@kskumd)
on CodePen.
他のtoggle系
他のtoggle系関数（toggle/fadeToggle）を紹介します。実際のソースコードを見てみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<div>
<button id="btn1">slideToggle</button>
<p>
This is jQuery slideToggle() sample.<br>
This is jQuery slideToggle() sample.<br>
This is jQuery slideToggle() sample.
</p>
</div>
<div>
<button id="btn2">toggle</button>
<p>
This is jQuery toggle() sample.<br>
This is jQuery toggle() sample.<br>
This is jQuery toggle() sample.
</p>
</div>
<div>
<button id="btn3">fadeToggle</button>
<p>
This is jQuery fadeToggle() sample.<br>
This is jQuery fadeToggle() sample.<br>
This is jQuery fadeToggle() sample.
</p>
</div>
|
jQueryは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$(function(){
$("#btn1").click(function () {
$('#btn1+p').slideToggle();
});
$("#btn2").click(function () {
$('#btn2+p').toggle();
});
$("#btn3").click(function () {
$('#btn3+p').fadeToggle();
});
});
|
実行結果は以下のようになります。表示/非表示の違いが分かるのではないでしょうか。
See the Pen
jQuery_slideToggle4 by kskumd (@kskumd)
on CodePen.
- システム
エンジニア - jQueryでのslideToggleの使い方がよく分かりました。
- プロジェクト
マネージャー - jQueryでslideToggleを使うと要素の表示/非表示を切り替えられたり、スピードやコールバック関数も指定できます。ご紹介した方法を参考にしてご自身でソースコードを書いて理解を深めてください。
まとめ
いかがでしたでしょうか。jQueryでのslideToggleの使い方について説明しました。slideToggleを使うと、要素の表示/非表示を切り替えられます。スピードやコールバック関数も指定可能です。また、ほかのtoggle系関数との違いについても紹介しました。
ぜひご自身でソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
JavaScript新着案件New Job
-
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務
月給26万～26万円東京都千代田区(秋葉原駅) -
官公庁向けシステム運用保守/C＃/東京都府中市/【WEB面談可】
月給50万～60万円東京都府中市(中河原駅) -
官公庁向けシステム開発のテスター/C＃/東京都府中市/【WEB面談可】
月給25万～35万円東京都府中市(中河原駅) -
システム開発部門でWeb系のプログラマー/埼玉県川越市/【WEB面談可】/在宅勤務
月給63万～63万円埼玉県川越市(南大塚駅)
