Code Snippet – ボタンにイベントを歩いてターゲットを開け閉めjQueryのコードスニペット

$(document).ready(function(){

  // 開かれるイベントをかける。
  $('.jquery-on-container').on('click', '.js-open-target', function(e){

    // aやsubmitボタンにクラスを付けた場合、リンク移動やsubmitを防ぐ。
    e.preventDefault();
    var target_selector = $(this).data('target');
    $(target_selector).slideDown();
    $(this).removeClass('js-open-target').addClass('js-close-target');
  });

  /*
   * 最初は。js-close-targetクラスがDOMにロードされていない。
   * on関数を使用すると、監視していた要素の中に定められた要素が登場したときのイベントをかける。
   * この場合、。jquery-on-containerを監視しているが。
   * js-close-targetが登場すると閉鎖したイベントをかける。
   * 前の開かれるイベントをon関数には理由も同じだ。
   * クラスをjs-open-targetにしたがjs-close-targetにしたがためだ。
   */
  $('.jquery-on-container').on('click', '.js-close-target', function(e){
    e.preventDefault();
    var target_selector = $(this).data('target');
    $(target_selector).slideUp();
    $(this).removeClass('js-close-target').addClass('js-open-target');
  })

  // jsファイルをドラッグした場合にはコンテンツが見えるようにjsで開くことはjsで消す。
  $('.js-open-target').each(function(){
    var target_selector = $(this).data('target');
    $(target_selector).hide();
  });
});

<h2 class="jquery-on-container">
  <!-- キーボードfocusができるようにaタグを利用した。 -->
  <a href="#" class="js-open-target" data-target=".closed-content">Toggle Target</a>
</h2>
<div class="closed-content">
  <p>大衆が歴史の舞台に登場した瞬間を革命であるならば、ウゴ·チャベスのボリバル革命は、2002年4月11日に開始した。</p>
  <p>右翼クーデター勢力はチャベスを拉致して、新しい政府を宣言した。その政府はやっと48時間の間だけ維持された。</p>
  <p>チャベス支持者数万人がチャベスの復帰を要求して大統領官邸を包囲した。</p>
  ...
</div>

.js-open-target, .js-close-target {
  cursor: pointer;
}
.js-open-target:after {
  content: "▼";
  font-size: .6em;
  font-family: helvetica;
  color: #888;
  vertical-align: middle;
  margin-left: .5em; 
}
.js-close-target:after {
  content: "▲";
  font-size: .6em;
  font-family: helvetica;
  color: #888;
  vertical-align: middle;
  margin-left: .5em; 
}