<p>Click on the box to toggle the containers.</p>

<div class="toggle-wrap">
  <div id="box-1" class="box active">Click me</div>
  <div id="box-2" class="box">Click me again</div>
</div>
body {
  padding: 20px;
}

.box {
  width: 100%;
  height: 300px;
  display: none;
  background: lightgrey;
  justify-content: center;
  align-items: center;
  font-size: 3em;
}

.box.active {
  display: flex;
}

#box-1 {
  background: lightblue;
}

#box-2 {
  background: #ffd375;
}
View Compiled
(function ($) {
  $(function () {
    $(".toggle-wrap").click(function () {
      $(this).find(".box").toggleClass("active");
    });
  });
})(jQuery);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js