Question: Is there any way to have multiple distinct HTML pages contained within a single HTML file? For example, suppose I have a website with two pages:

```
Page 1 : click here for page 2

```

and

```
Page 2 : click here for page 1

```

Can I create a single HTML file that embeds simple static HTML for both pages but only displays one at a time? My actual pages are of course more complicated with images, tables and javascript to expand table rows. I would prefer to avoid too much script code. Thanks!

Answer: 
Have you considered [iframes](https://developer.mozilla.org/en/HTML/Element/iframe) or segregating your content and using a simple show/hide?

**Edit** If you want to use an iframe, you can have the contents of page1 and page2 in one html file. Then you can decide what to show or hide by reading the `location.search` property of the iframe. So your code can be like this : 

For Page 1 : `iframe.src = "mypage.html?show=1"`

For Page 2 : `iframe.src = "mypage.html?show=2"`

Now, when your iframe loads, you can use the `location.search.split("=")[1]`, to get the value of the page number and show the contents accordingly. *This is just to show that iframes can also be used but the usage is **more complex** than the normal show/hide using div structures*.
going along with @binz-nakama, here's an update on his jsfiddle with a very small amount of javascript. also incoporates this [very good article on css navigation](http://css-snippets.com/simple-horizontal-navigation/ "very good article") 

[update on the jsfiddle](https://jsfiddle.net/seanmcdon/x2ybsvz6/ "jsfiddle")

```
Array.from(document.querySelectorAll("a"))
.map(x => x.addEventListener("click", 
  function(e){
    Array.from(document.querySelectorAll("a"))
    .map(x => x.classList.remove("active"));
    e.target.classList.add("active");    
  }
));

```