CODEWITHSUNDEEP
javascripthtmlcss
Chris
Chris

Reputation: 99

Multiple pages in one html page

Looking to be able to put multiple distinct pages into one html page similar to the code shown below that was posted in this post: Multiple distinct pages in one HTML file

However, I would like to have a fixed header above the pages to allow for navigation.
For example, the header has 4 links (Link1,Link2,etc.) that a user can choose from. If a user where to click on "Link2", then only Link2 will appear beneath and the other pages will remain hidden.

Let me know, Thanks!

function show(shown, hidden) {
  document.getElementById(shown).style.display='block';
  document.getElementById(hidden).style.display='none';
  return false;
}
<!DOCTYPE html>
<html>
  <body>
    <div id="Page1">
      Content of page 1
      <a href="#" onclick="return show('Page2','Page1');">Show page 2</a>
    </div>

    <div id="Page2" style="display:none">
      Content of page 2
      <a href="#" onclick="return show('Page1','Page2');">Show page 1</a>
    </div>
  </body>
</html>

Upvotes: 3

Views: 44143

Answers (1)

Joel Peltonen
Joel Peltonen

Reputation: 13402

You could play with the IDs only, but if you get many pages that starts to get a little tedious. I suggest using a class to do the hiding. Also, if you want there to be a common header for the pages, you just need to build it from HTML elements and then display the page links there and not within the page content.

I made an alternative suggestion where I added a 'page' class to all the page DIVs. Then what you can do is hide all the DIVs with the "page" class and show the one you want with an ID. This too is not a very flexible system, you can't easily do a dynamic amount of pages or a dynamic first page but it is a place to start. Here's my example:

This is in JSFiddle http://jsfiddle.net/H4dbJ/ but here's the code directly:

// show the given page, hide the rest
function show(elementID) {
  // find the requested page and alert if it's not found
  const ele = document.getElementById(elementID);
  if (!ele) {
    alert("no such element");
    return;
  }

  // get all pages, loop through them and hide them
  const pages = document.getElementsByClassName('page');
  for (let i = 0; i < pages.length; i++) {
    pages[i].style.display = 'none';
  }

  // then show the requested page
  ele.style.display = 'block';
}
span {
  text-decoration:underline;
  color:blue;
  cursor:pointer;
}
<p>
  Show page 
  <span onclick="show('Page1');">1</span>, 
  <span onclick="show('Page2');">2</span>, 
  <span onclick="show('Page3');">3</span>.
</p>

<div id="Page1" class="page" style="">
  Content of page 1
</div>
<div id="Page2" class="page" style="display:none">
  Content of page 2
</div>
<div id="Page3" class="page" style="display:none">
  Content of page 3
</div>

Further development ideas include: a next/prev button that uses Page1 Page2...PageN the page number as a variable, loops through all the pages an shows the last one. Or shows the first one. After that, a Next/Previous button that keeps track of the current page in a variable and then goes to the next one.

Upvotes: 5

Related Questions