Switching html pages inside the same (one) container html page

Question

Ok let us say I have just one HTML page. Call it index.htm This is the container page.(Is there another fancy name for container page ?)

I have 3 buttons on this page on top. Buttons A, B and C

If I click on Button A, I want to display a HTML page called fileX.htm inside the same index.htm page, right below it. But then if I click on Button B, I want to replace fileX.htm with file fileY.htm (in the same area where fileX.htm was displayed). Then if I click on Button C, I want to replace fileY.htm with fileZ.htm. Then I click on button B and filey.htm must replace fileZ.htm on so on.

I know how to do this with iFrames. I have also seen this done using tabs and a CSS file. Both seem messy.

I know how to show just one file fileX.htm using embed tag.But the problem is switching from filex.htm to fileY.htm etc. Is it possible to do this using embed or some other simple way such as an altered href tag or something ?

Thanks

Answer 1

You can by changing src attribute of embed when the button is clicked using Javascript

Edit: Working example

index.html

<embed type="text/html" src="test1.html" width="500" height="300" id="embed" />

<button id="test1">Test1</button>
<button id="test2">Test2</button>

<script>
  const test1 = document.getElementById("test1");
  const test2 = document.getElementById("test2");
  const embed = document.getElementById("embed");

  test1.addEventListener("click", (e) => {
    embed.src = "test1.html";
  });

  test2.addEventListener("click", (e) => {
    embed.src = "test2.html";
  });
</script>

test1.html

<h1>test1</h1>

test2.html

<h1>test2</h1>

You can do the same with object and iframe AFAIK.