Multi-page content slider in a single HTML file

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.

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><divclass="page"><p>This is page one</p></div><divclass="page"style="display:none;"><p>This is page two</p></div><divclass="page"style="display:none;"><p>This is page three</p></div></body>

Result:

This is page one

This is page two

This is page three

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><divid="page1"class="page"><p>This is page one</p><buttononclick="nextpage();">Next</button></div><divid="page2"class="page"style="display:none;"><p>This is page two</p><buttononclick="nextpage();">Next</button></div><divid="page3"class="page"style="display:none;"><p>This is page three</p></div></body>

Result:

This is page one

This is page two

This is page three

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

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 two

This is page three

This is page one

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