Вы можете переключать контейнер со всеми стилями, что делает его видимым или нет.
Например:
display:none;
visibility: hidden;
const button1 = document.querySelector('.toggle-first');
const button2 = document.querySelector('.toggle-second');
const firstContainer = document.querySelector('.first');
const secondContainer = document.querySelector('.second');
button1.addEventListener('click', () => {
firstContainer.style.display = 'block'; // Or visibility: visible or other style
secondContainer.style.display = 'none';
});
button2.addEventListener('click', () => {
secondContainer.style.display = 'block'; // Or visibility: visible or other style
firstContainer.style.display = 'none';
});
<div class="container first">
<h1> First container </h1>
</div>
<button class="toggle-first"> Toggle first container </button>
<div class="container second">
<h1> Second container </h1>
</div>
<button class="toggle-second"> Toggle second contianer </button>