Question

Trying to create some next and previous functionality here. Navigating through different HTML5 sections using hide and show, is it possible, for my back button, to find whichever div was last visible and show it?

This is my relevant html

    <div id="next"><img src="img/next.png" alt="" onclick="nextPage()"></div>

    <section id="splash">
        <br><br><br>
        <center>
        <img src="img/home.jpg" alt="">
        </center>
    </section>

    <section id="home">
        <br><br><br><br><br>
        <center>
        <ul id="nav">
            <li><img src="img/feat_btn.png" alt="" onclick="nextPage('feat-home')"></li>
            <li><img src="img/models_btn.png" alt="" onclick="nextPage('model-lineup')"></li>
            <li><img src="img/quiz_btn.png" alt="" onclick="nextPage('quiz')"></li>
        </ul>
        </center>
    </section>

    <section id="feat-home">feat home</section>
    <section id="feat-e-menu">e menu</section>
    <section id="feat-g-menu">g menu</section>
    <section id="feat-i-menu">i menu</section>
    <section id="model-lineup">lineup</section>
    <section id="model-YWFE540H0A">model</section>
    <section id="quiz">quiz</section>

relevant js

function nextPage(link) {
    var vis = $("section:visible");
    var next = vis.next();

    if (link) {
        var link = "#" + link;
        vis.hide();
        $(link).show();
    } else {
        vis.hide();
        next.show();
    }
  }

So, the next button will take you through the flow off the app, but you are also able to press buttons to get to where you want to go, which is why I cant just have the back button show the prev section and hide the current one.

Any ideas?

Answer 1

On click, you will need to store what is currently being shown in a separate variable and use that for your previous button clicks.

When previous button is clicked show what is in the “previously shown” variable.

You will need to disable the previous button when it’s a fresh page load.

This really does look a lot like some of the content slider plugins that are out there.