Select Page

I recently had to create a custom HTML and PHP form which was split up into separate steps. As the form would change dynamically depending on what the user in-putted in previous questions, I wanted to display it in a page format so the user couldn’t see what was coming up next.

I didn’t want to over complicate it at all, as it was a fairly simple form, so I came up with somewhat of a hack to cheat the look of numerous pages without the need for multiple forms or page refreshes.

I’m just going to be showing some dummy text in these ‘pages’, but it’s just HTML so you could put whatever you like in them.

Here’s what we’ll be creating:

The HTML is really simple for this, all we do is to separate the ‘pages’ into divs with ids of ‘page1’, ‘page2’, ‘page3’, etc.

HTML:

<body>
  <div id="page1" class="page">
    <p>This is page one</p>
  </div>
  <div id="page2" class="page">
    <p>This is page two</p>
  </div>
  <div id="page3" class="page">
    <p>This is page three</p>
  </div>
</body>

And a little bit of CSS to format it how you like.

.page {
  border: 1px solid black;
  padding: 20px;
  background-color: cadetblue;
  color: white;
}

Result:

This is page one

This is page two

This is page three

But of course this just shows all of the ‘pages’ one after the other, so to just see page1, let’s hide all of the other pages.

HTML:

<body>
  <div class="page">
    <p>This is page one</p>
  </div>
  <div class="page" style="display:none;">
    <p>This is page two</p>
  </div>
  <div class="page" style="display:none;">
    <p>This is page three</p>
  </div>
</body>

Result:

This is page one

To be able to go to the next page, we’re going to need a bit of jQuery. This can also be done in JavaScript, but the jquery is a little simpler and cleaner, so I prefer it. All this code does, is hide a specified div and then show a specified div. For example to go from page1 to page2 we could use:

jQuery:

function nextpage() {
  $("#page1").hide();
  $("#page2").show();
}

And to call this function, just add a link or button in the ‘pages’ with an ‘onclick’ attribute.

HTML:

<body>
  <div id="page1" class="page">
    <p>This is page one</p>
    <button onclick="nextpage();">Next</button>
  </div>
  <div id="page2" class="page" style="display:none;">
    <p>This is page two</p>
    <button onclick="nextpage();">Next</button>
  </div>
  <div id="page3" class="page" style="display:none;">
    <p>This is page three</p>
  </div>
</body>

Result:

This is page one

When we get to page two however, you can see we can’t get to page three because our jQuery code is hiding and showing only the pages we told it to. So to make it a bit more dynamic, lets pass in the current page number on the onclick and plus one onto that to get the next page.

HTML:

<body>
  <div id="page1" class="page">
    <p>This is page one</p>
    <button onclick="nextpage(1);">Next</button>  <!--pass in the number 1 as the current page-->
  </div>
  <div id="page2" class="page" style="display:none;">
    <p>This is page two</p>
    <button onclick="nextpage(2);">Next</button>  <!--pass in the number 2 as the current page-->
  </div>
  <div id="page3" class="page" style="display:none;">
    <p>This is page three</p>
  </div>
</body>

jQuery:

function nextpage(pagenum) {
  $("#page"+pagenum).hide();
  var nextpagenum = pagenum+1;
  $("#page"+nextpagenum).show();
}

Result:

This is page one

And that’s pretty much it! All that’s left is to add a ‘Previous’ button, spruce up the CSS to get it looking how you want it to and play around with jQuery to get some nice transitions when the pages change. You can see a list of options here, just change the ‘show()’ and ‘hide()’ and see what they do!

Here are a couple of examples:

This is page one

To use this effect, change:
.hide() with .slideUp(“slow”)
.show() with .slideDown(“slow”)

This is page one

To use this effect, change:
.hide() with .hide(“slow”)
.show() with .show(“slow”)

Here’s the full code of the demo at the top of the page:

See the Pen Single file Multi-page content slider by chilli con code (@chilliconcode) on CodePen.