如何在单变量角度模式下显示和隐藏两个div

<div id="div1">内容1</div>
<div id="div2">内容2</div>

<button onclick="toggleDiv()">切换显示</button>

<script>
function toggleDiv() {
  var div1 = document.getElementById("div1");
  var div2 = document.getElementById("div2");

  if (div1.style.display === "none") {
    div1.style.display = "block";
    div2.style.display = "none";
  } else {
    div1.style.display = "none";
    div2.style.display = "block";
  }
}
</script>

<input type="checkbox" id="checkbox">
<label for="checkbox">切换显示</label>

<div class="div1">内容1</div>
<div class="div2">内容2</div>

<style>
.div1, .div2 {
  display: none;
}

#checkbox:checked ~ .div1 {
  display: block;
}

#checkbox:not(:checked) ~ .div2 {
  display: block;
}
</style>

<div class="div1">内容1</div>
<div class="div2">内容2</div>

<button id="toggleBtn">切换显示</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("#toggleBtn").click(function() {
  $(".div1").toggle();
  $(".div2").toggle();
});
</script>