show・hideメソッドを使用した要素の表示・非表示

show・hideメソッドを使用した要素の表示・非表示

jQuery

show()・hide()を使うと、要素が非表示状態のものを表示(show)、または表示状態のものを非表示(hide)にすることができます。
ではでは、早速コードを書いてみましょう。

showメソッドを使って表示させる

[html]
<html>
<head>
<style>
#show{
display: none;
border: 1px #999999 solid;
padding: 5px;
}
</style>
<script src="jquery-1.11.0.min.js"></script>
<script>
$(function(){
$("a").on("click", function(){ $("#show").show(); });
});
</script>
</head>
<body>
<a href="javascript:;">▼クリックすると表示されます。</a>
<div id="show">showメソッドを使って表示されました!!</div>
</body>
</html>
[/html]
サンプル
リンクをクリックすると、div要素を表示状態にします。
たったこれだけで非表示から表示に切り替えることができます。上の設定だとリンクをクリックしたときにアニメーションなしに急にされますが、13行目の「・・・.show()」の括弧の中をに数字や特定文字を入れると表示するときに動きがつきます。
「・・・.show(500)」「・・・.show(“fast”)」などなど。
※数字を入れる場合は単位が「ms」ですので1秒=1000msとなります。

hideメソッドを使って非表示にする

[html]
<html>
<head>
<style>
#hide{
border: 1px #999999 solid;
padding: 5px;
}
</style>
<script src="jquery-1.11.0.min.js"></script>
<script>
$(function(){
$("a").on("click", function(){ $("#hide").hide(); });
});
</script>
</head>
<body>
<a href="javascript:;">▼クリックすると非表示になります。</a>
<div id="hide">表示から非表示になります!!</div>
</body>
</html>
[/html]
サンプル
これは、先ほどのshowを見ていれば簡単ですね。「・・・.show()」の部分が「・・・.hide()」になっただけですね。(ID名とかは変えている前提です。)
これもshowメソッドと同じで「・・・.hide()」の括弧の中を設定してあげるとアニメーションがつきます。

この二つをうまく使えば表示・非表示を切り替えることが可能ですが、それについてはもっと簡単な方法があるので次回にでも書こうと思います。ではでは。

要素の表示・非表示をする場合
・要素の表示は「.show()」を使用
・要素の非表示は「.hide()」を使用
・動きをつけたい場合は、括弧の中に値を入力