jQueryで要素の表示・非表示を切り替える方法についてです。
要素の非表示 ( hide )
hideメソッドを使うと要素を隠すことができます。引数には非表示にする際の時間と、コールバック関数を指定できます。
<body> <button>click</button> <p>表示されてるメッセージ</p> </body>
$(function() { $('button').click(function(){ $('p').hide(); }); });
.hide()
はcss('display', 'none')
と同じ意味です。
$(function() { $('button').click(function(){ $('p').css('display', 'none'); }); });
.hide() | jQuery 1.9 日本語リファレンス | js STUDIO
サンプル
表示されてるメッセージ
要素の表示 ( show )
showメソッドを使うとdisplay: none;
で非表示になっている要素を表示できます。引数には非表示にする際の時間と、コールバック関数を指定できます。
<body> <button>click</button> <p style="display: none;">隠されてるメッセージ</p> </body>
$(function() { $('button').click(function(){ $('p').show(); }); });
.show()
はブロック要素の場合のcss('display', 'block')
と同じ意味です。
$(function() { $('button').click(function(){ $('p').css('display', 'block'); }); });
.show() | jQuery 1.9 日本語リファレンス | js STUDIO
サンプル
要素の表示・非表示の切り替え ( toggle )
toggleメソッドを使うと showメソッドと hideメソッドを交互に実行します。引数には非表示にする際の時間と、コールバック関数を指定できます。
<body> <button>click</button> <img src="../jquery.jpg"/> </body>
$(function() { $('button').click(function(){ $('img').toggle(); }); });
.toggle()
は引数に true を指定すれば.show()
、false を指定した場合は.hide()
が実行されます
$(function() { $('button').click(function(){ $('p').toggle(true); }); });
.toggle() | jQuery 1.9 日本語リファレンス | js STUDIO