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

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

<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>

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

Related Article

jQuery を 用いて ヘッダー や フッター の 共通パーツ を 読み込む

詳細へ »

jQuery を 使って WP REST API v2 から 記事を 取得して 表示する (サムネイル対応)

詳細へ »

Bootstrap で 画像 が 隣り合う時に 高さを調節する

詳細へ »