How to hide current element and show next on button click?

Question

I have a JQuery questionnaire website on mobile. Most of the website users use Opera Mini, and the current JQuery mobile animations are not fully supported.

I then decided to implement a bootstrap based website, rather than JQuery mobile. This time I want to implement so that one question appears at a time, and when a user wants to go to the next question, they just press next.

How can I implement this?

I currently have something like this:

$('#next').click(function(){
    $('#question1').hide();
    $('#question2').show();

});

But I have 30 some-odd questions, so, how can I set it up dynamically with as simple of a code as possible?

Your help would be greatly appreciated.

Answer 1

In general, you shouldnt use ids for something like this, it's just more trouble than it's worth. Instead, just use classes. A simple implementation might look like this:

$('#next').click(function(){
    var $current = $('.question.active');
    // use $current here to test if the question was answered if needed 
    // maybe something like if($current.find('.answer').val().trim() == ''){ return;}
    $('.question').removeClass('active');
    $current.next().addClass('active');
});

.question:not(.active){
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="questions">
  <div class="question active">Some question 1</div>
  <div class="question">Some question 2</div>
  <div class="question">Some question 3</div>
  <div class="question">Some question 4</div>
  <div class="question">Some question 5</div>
  <div class="question">Some question 6</div>
  <div class="question">Some question 7</div>
  <div class="question">Some question 8</div>
</div>
<button type="button" id="next">Next</button>