Jquery Show or hide content block on click on checkbox

I have several checkboxes when clicking on a certain checkbox, I want to show some content (in my case, this is a simple block for an example) when clicking on another checkbox, the previous block should hide and display a new block, I think to solve this problem you need to apply forEach checkboxes work for me, but I cannot display blocks

  <div class="toggle-two">
    <div><small>content 1</small></div>
    <label class="switch-label">
      <input class="switch" id="switch-novice" value="switch-novice"  type="checkbox"/>
       <span class="slider round"></span>
    </label>
  </div>
  
  <div class="toggle-three">
    <div><small>content 2</small></div>
    <label class="switch-label">
      <input class="switch" id="switch-intermediate" value="switch-intermediate"  type="checkbox"/>
      <span class="slider round"></span>
    </label>
  </div>
  
  <div class="toggle-four">
    <div><small>content 3</small></div>
    <label class="switch-label">
      <input class="switch" id="switch-expert" value="switch-expert" type="checkbox" />
      <span class="slider round"></span>
    </label>
  </div>

  <!-- ------------------------------------------- -->
  
  </div>
  <div>
    <div class="content c1"></div>
    <div class="content c2"></div>
    <div class="content c3"></div>
  </div>

**script.js**

let uploadPres = document.getElementsByClassName("content");

$(".content").each(function (index, value) {
  $(`.switch:not([checked])`).on("change", function (param1, param2) {
    $(".switch").not(this).prop("checked", false);

    if ($(".switch").is(":checked")) {
      console.log(this.checked);
    }
  });
});

Initially a class named content has display: none by default

You can also see this example in codesandbox