【jQuery】クリックで要素の表示・非表示を切り替える

Image

ボタンがクリックされた場合にある要素の表示・非表示を切り替える処理です。

以下のデモのような処理を行います。

Demo

jQueryを読み込む

GoogleのCDNを利用してjQueryを読み込みます。

CDNというのはContents Delivery Network(コンテンツ・デリバリー・ネットワーク)の略称で、ネットワークを経由してウェブコンテンツを利用するサービスを指します。ネットワークに接続されている機器であれば利用することができます。

jQueryは以下の記述で読み込むことができます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

show()とhide()

今回、要素の表示と非表示の状態はshow()とhide()というものを使って切り替えます。

show()

show()は指定した要素を表示状態にすることができます。styleのdisplay:blockをインライン属性(指定したHTMLの要素に「style」を埋め込む)に追加します。

もし、show()で指定した要素にvisibility:hidden等が適用されていた場合は表示されませんのでご注意下さい。

show()は以下のように記述します。

$(E).show();

上記例では、Eという要素にshow()を行い、表示状態にします。

hide()

hide()は指定した要素を非表示状態にすることができます。styleのdisplay:noneをインライン属性に追加します。

hide()は以下のように記述します。

$(E).hide();

上記例では、Eという要素にhide()を行い、非表示状態にします。

表示・非表示のスピードを指定する

show()とhide()で表示・非表示にする際、スピードを設定することができます。

設定できる値には以下のものがあります。

slow

$(E).show('slow');

normal

$(E).show('normal');

fast

$(E).show('fast');

ミリ秒(例:1000)

$(E).show(1000);

デモの実装

HTML

デモで使っているHTMLです。

ボタンがクリックされた際にelement1とelement2の表示・非表示を切り替えます。

<div id="wrap">
  <button class="button">Switch Button</button>
  <div class="element1">element1</div>
  <div class="element2">element2</div>
</div>

JS

デモで使っているスクリプトです。

行っている処理につきましてはコメントに記載しています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){

  //デフォルトで表示する要素を指定
  $('.element1').show();
  $('.element2').hide();

  //buttonがクリックされたら
  $('.button').click(function () {

    //toggleClassで指定した要素にswitchのclassを追加または削除
    $('#wrap').toggleClass('switch');

    //wrapがswitchを持っていれば
    if($('#wrap').hasClass('switch')){

      //要素の表示を切り替える
      $('.element1').hide();
      $('.element2').show();

    //wrapがswitchを持っていなければ
    }else{

      //要素の表示を切り替える
      $('.element1').show();
      $('.element2').hide();

    }
  });
});
</script>

Copy & Paste

以下コピペ用です。

デモ内容を簡単に実装することができます。コードを編集してお好みのデザインに仕上げましょう!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){

  $('.element1').show();
  $('.element2').hide();

  $('.button').click(function () {

    $('#wrap').toggleClass('switch');

    if($('#wrap').hasClass('switch')){

      $('.element1').hide();
      $('.element2').show();

    }else{

      $('.element1').show();
      $('.element2').hide();

    }
  });
});
</script>
<style>
body{
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}

.element1{
  width: 500px;
  height: 500px;
  color: #FFFFFF;
  background: #C3A572;
}
.element2{
  width: 500px;
  height: 500px;
  color: #FFFFFF;
  background: #008499;
}
</style>

<div id="wrap">
  <button class="button">Switch Button</button>
  <div class="element1">element1</div>
  <div class="element2">element2</div>
</div>

SHARE