jQuery toggle 要素を表示/非表示にする

jQueryの要素を表示または非表示にするサンプルです。
toggleメソッドを使用します。

サンプル	toggleメソッド
	表示と非表示のサンプル
	表示/非表示の秒数を設定する
	toggleメソッドの引数に関数を設定する

toggleメソッド

jQueryのtoggleメソッドです。
要素が表示のとき、非表示にします。
要素が非表示の時、表示します。
以下はjQueryサイトのtoggleメソッドのリンクです。
http://api.jquery.com/toggle/

表示と非表示のサンプル

表示と非表示のサンプルです。
ボタンを押すと文字を表示し、再度ボタンを押すと文字を非表示にします。

テスト１

上記サンプルのコードです。

<p id="p1">テスト１</p>
<input type="button" id="button1" value="ボタン1" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	// 初期表示は非表示にする
	$('#p1').toggle();

	$("#button1").click(function() {
		$("#p1").toggle();
	});

</script>

8行目は、初期表示を非表示にしています。
11行目のtoggleメソッドは、要素が表示のとき非表示にし、要素が非表示のとき表示します。

表示/非表示の秒数を設定する

表示/非表示の秒数を設定するサンプルです。
ボタンを押すと1秒かけて表示/非表示にします。

テスト2

上記サンプルのコードです。

<p id="p2">テスト１</p>
<input type="button" id="button2" value="ボタン1" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	// 初期表示は非表示にする
	$('#p2').toggle();

	$("#button2").click(function() {
		$("#p2").toggle(1000);
	});

</script>

11行目のtoggleメソッドは、1秒(1000ミリ秒)かけて表示/非表示にします。設定する単位はミリ秒です。

toggleメソッドの引数に関数を設定する

toggleメソッドの引数に関数を設定するサンプルです。
ボタンを押すと文字が表示され、ボタン名が変わります(1回のみ)。

テスト３

上記サンプルのコードです。

<p id="p3">テスト３</p>
<input type="button" id="button3" value="ボタン3" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

	// 初期表示は非表示にする
	$('#p3').toggle();

	$("#button3").click(function() {
		$("#p3").toggle("1000",function(){
			$("#button3").attr("value","押しました");
		});
	});

</script>

11行目は、toggleメソッドの2つめの引数が関数になっています。
関数が実行されるとボタンの文字名が変わります(このコードでは1回のみ)。