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


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

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

<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>
サンプル
リンクをクリックすると、div要素の表示・非表示が切り替わります。
show・hideを組み合わせなくても切り替え処理ができるので、すごく楽チンですね!!
これもshow・hideメソッドと同様に「・・・.toggle()」の括弧の中を設定してあげるとアニメーションがつきます。
※数字を入れる場合は単位が「ms」ですので1秒=1000msとなります。
要素の表示・非表示の切り替えは
・「.toggle()」を使用すると楽チン
・動きをつけたい場合は、括弧の中に値を入力

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です