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.
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>