【jquery】jqueryのshow()を使って、表示・非表示を切り替える（show）

divタグを表示・非表示にする方法はいくつかあると思いますが、
ここでは、showメソッドやhideメソッドを利用して「display:none」を切り替えたいと思います。

デモ

1

2

3

試しに、上のボタンを押してみてください。3種類のDIVを表示したり非表示にしたりします。

HTMLのサンプル

1

 

2


3

３つのボタンと３つのdivタグを設置しています。
それぞれにidを付与して識別するようにしています。

jqueryのサンプル

$(document).ready(function(){

 $('[id^=bt]').click(function(){
  var seq = $(this).attr('id').slice(-1);

  for (i=1;i<=3;i++) {
   if (i == seq) {
    $('#div' + seq).show(1000);
   } else {
    $('#div' + i).hide(1000);
   }
  }

 });
});
 

ボタンのクリックイベントを拾い、押されたボタンのidから識別番号を取得します。
識別番号と同じdiv要素には、「show()」を使い、違うdiv要素には、「hide()」を使ってます。
「show(1000)」の「1000」は、アニメーションの速度を指定でき、
この場合は、1000ミリ秒で開く、hide(1000)は、1000ミリ秒で閉じる。


簡単な表示・非表示ではこんな感じでよさそうですね。