I am making an AJAX request to retrieve Question1-Question10 from the back-end
Below is the code for the request:
<script>
$(document).ready(function() {
question_block();
});
function question_block() {
$.ajax({
url: '@Url.Action("QuestionBlocks", "Interwier")',
contentType: 'application/json; charset=utf-8',
type: 'GET',
dataType: 'json',
processData: false,
success: function(result) {
var email = result;
for (var i = 0; i <= email.length - 1; i++) {
var question = '<div style="font-size:20px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">' + email[i].Question1 + '</div>'+
'<div style="font-size:20px;">' + email[i].Question2 + '</div>' +
'<div style="font-size:20px;">' + email[i].Question3 + '</div>' +
'<div style="font-size:20px;">' + email[i].Question4 + '</div>' +
'<div style="font-size:20px;">' + email[i].Question5 + '</div>' +
'<div style="font-size:20px;">' + email[i].Question6 + '</div>' +
'<div style="font-size:20px;">' + email[i].Question7 + '</div>' +
'<div style="font-size:20px;">' + email[i].Question8 + '</div>' +
'<div style="font-size:20px;">' + email[i].Question9 + '</div>' +
'<div style="font-size:20px;">' + email[i].Question10 + '</div>';
$("#questions").append(question);
}
},
error: function() {
alert("Something went wrong in the controller");
}
});
}
I want to display the first div by default and when a button, for example next, is clicked, I want to hide the first div and show the second one, and so on.
How can I achieve this?