jQueryの基礎：ポップアップウィンドウのトグル

サンプルはこちら。

See the Pen Basics of jQuery – Popup toggle by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

ボタンクリックで表示・非表示を切り替えます。

HTML

<div class="content">
 <button class="toggle">ポップアップトグル</button>
</div>
<div class="popup" id="popup1">ポップアップ</div>

展開用のボタン「.toggle」とポップアップ「#popup1」を置いています。

「#popup1」のIDはフック用と考えスタイルは指定せず、「.popup」を汎用的なクラスとしてこちらにスタイル設定をしています。

JavaScript

$(function () {

  //「.toggle」クリックで「#popup1」にtoggle()実行
  $(".toggle").click(function(){
    $("#popup1").toggle();
  });

});

4行目で「.toggleがクリックされたら～」という処理を開始しています。
5行目で「#popupを対象にtoggleを実行する」という処理を行っています。

「toggle()」は、その対象が「display:none」であれば「display:block」に、またその逆も行ってくれる便利な関数です。