jQueryの要素を表示または非表示にするサンプルです。
showメソッドとhideメソッドを使用します。
目次
表示と非表示のサンプル
表示と非表示のサンプルです。
ボタン1を押すと、showメソッドでP要素の文字を表示します。
ボタン2を押すと、hideメソッドでP要素の文字を非表示にします。
テスト1
コード
上記サンプルのコードです。
<p id="p1">テスト1</p>
<input type="button" id="button1" value="ボタン1" />
<input type="button" id="button2" value="ボタン2" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
// 初期表示を非表示にする
$('#p1').hide();
$("#button1").click(function() {
// 表示する
$("#p1").show();
});
$("#button2").click(function() {
// 非表示にする
$("#p1").hide();
});
});
</script>
1行目は、P要素です。
9行目のhideメソッドで初期表示を非表示にしています。
13行目のshowメソッドで1行目のP要素の文字を表示します。
18行目のhideメソッドで非表示にします。
表示/非表示の秒数を設定する
表示/非表示の秒数を設定するサンプルです。
ボタン3を押すと1秒かけて表示します。
ボタン4を押すと1秒かけて非表示にします。
テスト2
コード
上記サンプルのコードです。
<p id="p2">テスト1</p>
<input type="button" id="button3" value="ボタン3" />
<input type="button" id="button4" value="ボタン4" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
// 初期表示を非表示にする
$('#p2').hide();
$("#button3").click(function() {
// 1秒かけて表示する
$("#p2").show(1000);
});
$("#button4").click(function() {
// 1秒かけて非表示にする
$("#p2").hide(1000);
});
});
</script>
1行目は、P要素です。
13行目のshowメソッドは、1秒(1000ミリ秒)かけて表示します。
18行目のhideメソッドは、1秒(1000ミリ秒)かけて非表示にします。
showメソッド
- jQueryのshowメソッドです。
- 要素を表示します。
- 以下はjQueryサイトのshowメソッドのページです。
http://api.jquery.com/show/
hideメソッド
- jQueryのhideメソッドです。
- 要素を非表示にします。
- 以下はjQueryサイトのhideメソッドのページです。
http://api.jquery.com/hide/
関連の記事
jQuery 要素を表示/非表示にする(toggle)
jQuery 要素をスライドしながら表示/非表示にする(slideUp/slideDown)
jQuery 要素をスライドしながら表示/非表示にする(slideToggle)
jQuery 要素をフェードイン/フェードアウトする(fadeIn/fadeOut)
jQuery 要素をフェードイン/フェードアウトする(fadeToggle)
JavaScript 要素を表示/非表示にするサンプル(displayとvisibility)
jQuery アニメーションの動きを追加する(animate)