Display page content according button click - html

Question

How can I display page content according to the button I click?
I would like that on entering the page it presents the HTML of a button, but if you click on the other button the page loads another HTML.
I made a very simple example, and I would like the page to load the html inside the container class and then click on another button to load the content of the container-fluid class.
Sorry if I was confused.
Thanks!
My simple example
<li class="nav-item">
<a class="Grelha">
<img src="http://icons.iconarchive.com/icons/hopstarter/button/128/Button-Close-icon.png" style="width:30px; height:30px; cursor:pointer" >
</a>
</li>
<li class="nav-item">
<a class="Vquadrado">
<img src="http://icons.iconarchive.com/icons/hopstarter/button/128/Button-Play-icon.png" style="width:30px; height:30px cursor:pointer">
</a>
</li>
<div class="container">
<div class="row text-center text-lg-left tab-pane">
<div class="col-sm-2">
<a href="#" class="d-block mb-4 h-100">
<img class="Images" src="https://source.unsplash.com/pWkk7iiCoDM/400x300" alt="">
<div class="ImageText"> Name</div>
</a>
</div>
<div class="col-sm-2">
<a href="#" class="d-block mb-4 h-100">
<img class="Images" src="https://source.unsplash.com/aob0ukAYfuI/400x300" alt="">
<div class="ImageText"> Name</div>
</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="d-flex flex-row flex-wrap" style="margin-left: 3px;">
<div class="d-flex flex-column">
<a>
<img src="https://images.unsplash.com/photo-1485963631004-f2f00b1d6606?auto=format&fit=crop&w=668&q=80" class="img-fluid Vimages">
<div class="VimageText"> Name1</div>
</a>
<a>
<img src="https://images.unsplash.com/photo-1502865787650-3f8318917153?auto=format&fit=crop&w=334&q=80" class="img-fluid Vimages">
<div class="VimageText"> Name1</div>
</a>
</div>
</div>
</div>

Answer 1

You can toggle container with all styles which makes it visible or not.
For example:
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>