slideToggleとは
- ここで説明する slideToggle とは次の語句からなるjQueryのメソッドです。
- slide
- 読み: スライド
意味: 滑る - toggle
- 読み: トグル
意味: スイッチ機構の一種、一つのボタンで二つの状態を切り替えるもの
slideToggleメソッドの概要
このメソッドは、呼び出し元の要素が表示状態となっている場合、その要素を非表示にします。 また、呼び出し元の要素が非表示状態になっている場合には、その要素を表示します。 引数には、アニメーションに要する時間をミリ秒の単位で指定します。
呼び出し元のセレクターで、単一の要素を指定すれば、その要素のみの状態変化をもたらしますが、 class などで二つの要素を指定すれば、二つの要素を交互に表示させることも可能です。
このメソッドの機能を単一動作として機能する、 slideDown (表示) と slideUp (非表示) があります。
構文
サンプルを見る前に構文を確認しておきます。
$(Selector).slideToggle(speed);サンプルコードと実行結果
ここでは、3つの div要素を題材にします。 この中の2つの要素には、同じclass属性値を設定しています。 ただし、この2つの要素のうち1つはstyle属性をつかって予め非表示の設定をしています。 また残り1つの要素にはid属性値を設定しています。
このclassとidをjQueryセレクターに指定して、slideToggle()の呼び出し元とします。
単一要素を呼び出し元としてslideToggle()を実行した場合、要素は表示と非表示を繰り返します。 また複数要素を呼び出し元としてslideToggle()を実行した場合、要素は入れ替わり表示されることになります。
サンプルコード: CSS
<style>
.clsDiv, #idDiv{
margin: 2px;
padding: 5px;
width: fit-content;
}
.clsDiv{
background-color: ##lightpink;
}
#idDiv{
background-color: ##lightblue;
}
</style>
- 08: background-color (clsDivの背景色はライトピンクに設定しています。)
- 11: background-color (idDivの背景色はライトブルーに設定しています。)
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class ="clsDiv">Element A</div>
<div class ="clsDiv" style="display: none;">Element B</div>
<hr>
<div id="idDiv">Element C</div>
<button id="idButton">slideToggle</button>
<script>...</script>
</body>
- 06: div (class属性を付けている要素です。)
- 07: div (class属性を付けている要素です。style属性を使って予め非表示の設定をしています。)
- 08: hr (セパレーターです。サンプルを視認しやすくするために設置しているだけです。)
- 09: div (id属性を付けている要素です。)
- 10: button (ボタンです。クリックするとscriptの 02 ~ 05行目のコードが実行されます。)
サンプルコード: script
<script>
$("#idButton").click(function(){
$(".clsDiv").slideToggle(500);
$("#idDiv").slideToggle(500);
});
</script>
- 02-05: click(function(){処理} (呼び出し元の要素をクリックすると 処理 が実行されます。)
- 03, 04: slideToggle(500) (呼び出し元の要素を500ミリ秒のアニメーションで表示、または非表示に切り替えます。)
Element A
Element C
引数についての補足
- 引数は数値型と文字型どちらでも構いません。 (500) or ("500")
- 引数はキーワードでも指定できます。 slow, normal, fast