<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);
This Pen doesn't use any external CSS resources.