toggleメソッドを使用した表示・非表示の切り替え

toggleメソッドを使用した表示・非表示の切り替え

jQuery

以前紹介した「show・hideメソッドを使用した要素の表示・非表示」で言っていました。表示・非表示の切り替えについて、show・hideを使用せず、ここでは、toggle(トグル)メソッドを使用してみます。
toggle処理とは表示(show)・非表示(hide)の切り替えを行ってくれますので、簡単に切り替え処理を実装できます。

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

[html]
<html>
<head>
<style>
#toggle{
display: none;
border: 1px #999999 solid;
padding: 5px;
}
</style>
<script src="jquery-1.11.0.min.js"></script>
<script>
$(function(){
$("a").on("click", function(){ $("#toggle").toggle(); });
});
</script>
</head>
<body>
<a href="javascript:;">▼クリックすると表示・非表示が切り替わります。</a>
<div id="show">toggleメソッドを使って表示・非表示が切り替わります!!</div>
</body>
</html>
[/html]
サンプル
リンクをクリックすると、div要素の表示・非表示が切り替わります。
show・hideを組み合わせなくても切り替え処理ができるので、すごく楽チンですね!!
これもshow・hideメソッドと同様に「・・・.toggle()」の括弧の中を設定してあげるとアニメーションがつきます。
※数字を入れる場合は単位が「ms」ですので1秒=1000msとなります。
要素の表示・非表示の切り替えは
・「.toggle()」を使用すると楽チン
・動きをつけたい場合は、括弧の中に値を入力