Multiple pages in one html page

Question

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>

You are missing some code. In the onclick, you use something called "dijit", where is that declared and what is it? If you separate your javascript to somewhere not in the HTML body thiss will be easier. — Joel Peltonen, Oct 10 '13 at 07:35
Just edited the post with the new piece of code above, would it be possible create the header using this piece of code or are there any other ways of doing it? — Chris, Oct 10 '13 at 18:14
Yes, it could be possible, but not very flexible. I made an example below that might be a little more usable. There the common "header" just reads "Show page 1,2,3." and the numbers are clickable. The actual content is hidden below the header in DIVs just like your question has. — Joel Peltonen, Oct 11 '13 at 06:37

Joel Peltonen · Accepted Answer · 2021-08-24T17:00:36.007

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.

Hello i have another question, to further build on top of the code, how can I add the function that will allow me to click a div and show me the desired page like you provided above. However; on top of that, lets say within 'page 1', I would like there to be another set of links that do the same exact function beneath 'page 1'. Let me know if you need me to clarify — Chris, Oct 14 '13 at 23:21
@Chris Hmm, kind of like a subpage? I don't have a good solution for that at all, but something like this might work, if I understood you correctly: http://jsfiddle.net/fLamG/ is that what you meant? — Joel Peltonen, Oct 15 '13 at 20:09

Multiple pages in one html page

1 Answers1