CPSC 349 - Multiple "pages" in a single HTML file.

spa.html

<div id="page1">
    <h1>First Page</h1>
    <p>This page contains some text.</p>
</div>

<div id="page2" hidden>
    <h1>Second Page</h1>
    <p>This page contains a <a href="">link</a>.</p>
</div>

<div id="page3" hidden>
    <h1>Third Page</h1>
    <p>This has some <strong>style</strong>.</p>
</div>

<button onclick="showNext()">Show Next Page</button>

<script>
    function showNext() {
        const pages = ['page1', 'page2', 'page3']
        const elements = pages.map(id => document.getElementById(id))
        const i = elements.findIndex(elt => !elt.hidden)

        elements[i].hidden = true
        elements[(i + 1) % elements.length].hidden = false
    }
</script>