ywork2020.com

Title

要素の表示と非表示を交互に切替する

目次 (INDEX)

toggleとは

ここで説明する toggle とは次の語句からなるjQueryのメソッドです。
toggle
読み: トグル
意味: スイッチ機構の一種、一つのボタンで二つの状態を切り替えるもの

目次に戻る

toggleメソッドの概要

このメソッドは、呼び出し元の要素が表示状態となっている場合、その要素を非表示にします。 また、呼び出し元の要素が非表示状態になっている場合には、その要素を表示します。 引数には、アニメーションに要する時間をミリ秒の単位で指定します。

呼び出し元のセレクターで、単一の要素を指定すれば、その要素のみの状態変化をもたらしますが、 class などで二つの要素を指定すれば、二つの要素を交互に表示させることも可能です。

このメソッドの機能を単一動作として機能する、 hide (非表示)show (表示) があります。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

$(Selector).toggle(speed);

目次に戻る

サンプルコードと実行結果

ここでは、3つの div要素を題材にします。 この中の2つの要素には、同じclass属性値を設定しています。 ただし、この2つの要素のうち1つはstyle属性をつかって予め非表示の設定をしています。 また残り1つの要素にはid属性値を設定しています。

このclassとidをjQueryセレクターに指定して、toggle()の呼び出し元とします。

単一要素を呼び出し元としてtoggle()を実行した場合、要素は表示と非表示を繰り返します。 また複数要素を呼び出し元としてtoggle()を実行した場合、要素は入れ替わり表示されることになります。

サンプルコード: 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">toggle</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").toggle(500);
		$("#idDiv").toggle(500);
	});
</script>
  • 02-05: click(function(){処理} (呼び出し元の要素をクリックすると 処理 が実行されます。)
  • 03, 04: toggle(500) (呼び出し元の要素を500ミリ秒のアニメーションで表示、または非表示に切り替えます。)
実行結果:
Element A

Element C

目次に戻る

補足

  1. 引数は文字型と数値型どちらでも構いません。(500) or ("500")
  2. 引数はキーワードでも指定できます。slow, normal, fast

目次に戻る