Question

I have the following jquery:

$("#quiz-prev, #quiz-next").click(function () {
    $("ul.chart li").removeClass("active");

    if($("#page1:visible")) {
        $("ul.chart li.one").addClass("active");
        $("p.step span").html("1");
        $("#quiz-prev").hide();
        $("#quiz-next").show();
    }
    if($("#page2:visible")) {
        $("ul.chart li.one, ul.chart li.two").addClass("active");
        $("p.step span").html("2");
        $("#quiz-prev").show();
        $("#quiz-next").show();
    }
    if($("#page3:visible")) {
        $("ul.chart li.one, ul.chart li.two, ul.chart li.three").addClass("active");
        $("p.step span").html("3");
        $("#quiz-prev").show();
        $("#quiz-next").show();
    }
    if($("#page4:visible")) {
        $("ul.chart li.one, ul.chart li.two, ul.chart li.three, ul.chart li.four").addClass("active");
        $("p.step span").html("4");
        $("#quiz-prev").show();
        $("#quiz-next").show();
    }
    if($("#page5:visible")) {
        alert('test');
        $("ul.chart li.one, ul.chart li.two, ul.chart li.three, ul.chart li.four, ul.chart li.five").addClass("active");
        $("p.step span").html("5");
        $("#quiz-prev").show();
        $("#quiz-next").hide();
    }
});

    $("#quiz-prev").click(function () {
        $(".page:visible").hide().prev().show();
    });
    $("#quiz-next").click(function () {
        $(".page:visible").hide().next().show();
    });

The idea is that when the prev and next buttons are pressed the code checks which div is visible and then would hide or show the buttons, hide or show the next or previous section div and add a class to a chart. However it jumps straight to the #page5 code even though it’s not visible on the page… any ideas what is wrong with the code?

Here is the HTML:

<div class="page-navigation Clearfix">
                                <a id="quiz-prev" class="Prev" href="javascript:void(false);" style="display:none;">
                                    <span>Prev</span>
                                </a>
                                <a id="quiz-next" class="Next" href="javascript:void(false);">
                                    <span>Next</span>
                                </a>
                            </div>

<p class="step">Step <span>1</span> / 5</p>

                            <ul class="chart Clearfix">
                                <li class="one active"></li>
                                <li class="two"></li>
                                <li class="three"></li>
                                <li class="four"></li>
                                <li class="five"></li>
                            </ul>


<div id="page1" class="page" style="display:block;">
</div>
<div id="page2" class="page" style="display:none;">
</div>
<div id="page3" class="page" style="display:none;">
</div>
<div id="page4" class="page" style="display:none;">
</div>
<div id="page5" class="page" style="display:none;">
</div>

Answer 1

Replace your javascript with this:

$("#quiz-prev, #quiz-next").click(function () {
    $("ul.chart li").removeClass("active");

    if($("#page1").is(":visible")) {
        $("ul.chart li.one").addClass("active");
        $("p.step span").html("2");
        $("#quiz-prev").hide();
        $("#quiz-next").show();
    }
    if($("#page2").is(":visible")) {
        $("ul.chart li.one, ul.chart li.two").addClass("active");
        $("p.step span").html("3");
        $("#quiz-prev").show();
        $("#quiz-next").show();
    }
    if($("#page3").is(":visible")) {
        $("ul.chart li.one, ul.chart li.two, ul.chart li.three").addClass("active");
        $("p.step span").html("4");
        $("#quiz-prev").show();
        $("#quiz-next").show();
    }
    if($("#page4").is(":visible")) {
        $("ul.chart li.one, ul.chart li.two, ul.chart li.three, ul.chart li.four").addClass("active");
        $("p.step span").html("5");
        $("#quiz-prev").show();
        $("#quiz-next").show();
    }
    if($("#page5").is(":visible")) {
        alert('test');
        $("ul.chart li.one, ul.chart li.two, ul.chart li.three, ul.chart li.four, ul.chart li.five").addClass("active");
        $("p.step span").html("6");
        $("#quiz-prev").show();
        $("#quiz-next").hide();
    }
});

    $("#quiz-prev").click(function () {
        $(".page:visible").hide().prev().show();
    });
    $("#quiz-next").click(function () {
        $(".page:visible").hide().next().show();
    });