Switching divs via JS (ASP.NET MVC)

Question

I have AJAX request to get Question1-Question10 from back-end

Here is code of 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("Smth wrong in controller");
        }
    });
}

I need to make visible first div for default and when I click button, for example next I need to hide first div and make visible second, etc.

How I can do this?

Answer 1

        <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;" class="que show'">' + email[i].Question3 + '</div>' +
                    '<div style="font-size:20px;" class="que hide">' + email[i].Question4 + '</div>' +
                    '<div style="font-size:20px;" class="que hide">' + email[i].Question5 + '</div>' +
                    '<div style="font-size:20px;" class="que hide">' + email[i].Question6 + '</div>' +
                    '<div style="font-size:20px;" class="que hide">' + email[i].Question7 + '</div>' +
                    '<div style="font-size:20px;" class="que hide">' + email[i].Question8 + '</div>' +
                    '<div style="font-size:20px;" class="que hide">' + email[i].Question9 + '</div>' +
                    '<div style="font-size:20px;" class="que hide">' + email[i].Question10 + '</div>';
                $("#questions").append(question);
            }
        },
        error: function() {
            alert("Smth wrong in controller");
        }
    });
}


// click on next
function next(){
    $(".que").each(function(){
        if( $( this ).hasClass('show') ){
         $( this ).removeClass("show").addClass('hide');
         $( this ).next().removeClass("hide").addClass('show');
      } 
  });
}
// same you can do for back button

Answer 2

use two classes "activeQue" and "hiddenQue"

by default give first question activeQue class and give hiddenQue to rest.

then you can use code like on next button to show hide questions

var element = $(".activeQue");
$(element).removeClass("activeQue").addClass("hiddenQue");
$(element).next().addClass("activeQue");

something like this

Answer 3

you can do this with set the second div take style="display:none" by default and when you click you will hide fist div and show second div jquery code :

$("#first").slideUp();
$("#second").slideDown();