Question

I’m creating a ASP.NET application where shows you a quiz. This quiz should be show to the user displaying question by question.

I mean, appears the first question and when he press the button next, hide the current question element and show the next one until it has no elements to show.

By the moment, I just have accomplish show all of them in MVC4. I really have not to much experience using JQuery.

<div id="questions-container">
    <div class="question">
     ...
    </div>
    <div class="question">
     ...
    </div>
    <div class="question">
     ...
    </div>
    <div class="question">
     ...
    </div>  
</div>

Can you orient about how can I implement this feature? Thanks

Answer 1

Default all questions to display: none;, show the first one when the page loads (or with another class .question.first that has display: block;, and then the next button can show the next question with:

$("#questions-container").find(":visible").hide().next().show();