Jquery Hide & Show To Build Quiz

i'm trying to make a simple quiz using jquery hide & show functions , first i created some divs elements wich will be the questions + the last elements will contain a text &

Solution 1:

JSFiddle

HTML:

<divclass="divs"><divclass="cls1">
       Gender<br/><inputtype="radio"name="sex"value="male">Male<br><inputtype="radio"name="sex"value="female">Female
     </div><divclass="cls2">
       Language<br/><inputtype="radio"name="language"value="java">Java<br><inputtype="radio"name="language"value="python">Python
     </div><divclass="cls3">
        Preference<br/><inputtype="radio"name="preference"value="morning">Morning<br><inputtype="radio"name="preference"value="night">Night       
     </div><divclass="cls4">4</div><divclass="cls5">5</div><divclass="cls6">6</div><divclass="cls7">7</div><divclass="your-quiz-result"></div></div><aid="next">next</a><aid="prev">prev</a>

JavaScript:

$(document).ready(function(){
    $(".divs > div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".divs div:visible").next().length != 0){
            $(".divs div:visible").next().show().prev().hide();

            if($(".divs div:visible").next().length == 0){
                //1. Hide the two buttons
                $("#next, #prev").hide();

                //3. Show the resultsvar divs = $(".divs div:visible").prevAll().clone();
                divs.show();

                //Reverse the ordervar divs = jQuery.makeArray(divs);
                divs.reverse();
                $(".your-quiz-result")
                    .empty()
                    .append(divs);
            }
        }
        returnfalse;
    });

    $("#prev").click(function(){
        if ($(".divs div:visible").prev().length != 0){
            console.log("There are still elements");
            $(".divs div:visible")
                .prev()
                .show()
                .next()
                .hide();
        }
        else {
            //2. Can't go previous first divconsole.log("Can't go previous first div");
        }
        returnfalse;
    });
});