CheckBox で 表示 非表示 を 切り替える スクリプト

意外と 忘れてしまうんですよね〜

なので 備忘録として 置いておきます

<div>
  <input type="checkbox" id="switch-label-01" name="switch" data-target="target-01">
  <label for="switch-label-01"> 表示の切り替え</label>
</div>

<div id="target-01" style="display: none;">
  <p>表示</p>
</div>

<script>
  jQuery(function($){
    $('input[name="switch"]').change(function() {
      if( $(this).prop('checked') ) {
        $( '#'+$(this).data('target') ).show();
      } else {
        $( '#'+$(this).data('target') ).hide();
      }
    });
  });
</script>

これを ちょっとカスタマイズすると アコーディオン とかも 作れるようになりますね〜