How to change a div with a button to another div?

Question

I've a next button and back button. I want to show one question div at a time. Then I want next button to change the div to the next div question and the back button should change the div back to the previous div. Only one div should be seen at a time.

<input type="image" src="forward.gif" alt="Next">
<input type="image" src="back.gif" alt="Back">

<div class="question_one">
<img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>

<div class="question_two">
<img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>

<div class="question_three">
<img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>

<div class="question_four">
<img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>

Answer 1

Here's a simple JavaScript which solves this kind of problem:

<script>
    var next = document.getElementById('next'),
        back = document.getElementById('back'),
        questions = document.getElementsByTagName('div'),
        current = 0;

    next.onclick = function showNext() {
        if (questions[current+1]) {
            questions[current].style.display = 'none';
            questions[current+1].style.display = 'block';
            current++;
        } else {
            return false;
        }
    }

    back.onclick = function showPrev() {
        if (questions[current-1]) {
            questions[current].style.display = 'none';
            questions[current-1].style.display = 'block';
            current--;
        } else {
            return false;
        }
    }
</script>

And at first you should hide the questions with CSS (except the first one):

<style>
    div:not(:first-of-type) {
        display: none;
    }
</style>

EDIT: here is your HTML...

<input type="image" src="forward.gif" alt="Next" id="next">
<input type="image" src="back.gif" alt="Back" id="back">

<div class="question_one">
    <img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>

<div class="question_two">
    <img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>

<div class="question_three">
    <img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>

<div class="question_four">
    <img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>

Answer 2

HTML

<div id="container">
   <input type="image" src="back.gif" alt="Back">
   <input type="image" src="forward.gif" alt="Next">

   <div class="question_one question active">
       1
      <img src ="images/green_question1.png" width="100%" height="100%"></img>
    </div>

    <div class="question_two question">
       2
        <img src ="images/green_question2.png" width="100%" height="100%"></img>
     </div>

        <div class="question_three question ">
            3
        <img src ="images/green_question3.png" width="100%" height="100%"></img>
        </div>

        <div class="question_four question">
            4
        <img src ="images/green_question4.png" width="100%" height="100%"></img>
        </div>
    </div>

Jquery

 <script>
    var $container = $("#container") // caches the jquery object 
    $container.find('input[alt="Next"]').on("click",function(){
       var active = $container.find(".active")

       if(active.next(".question").length === 0){
            return false
        }else{
           active.removeClass("active")
           active.next(".question").addClass("active")
       }

    })
    $container.find('input[alt="Back"]').on("click",function(){
        var active = $container.find(".active")

        if(active.prev(".question").length === 0){
            return false
        }else{
           active.removeClass("active")
           active.prev(".question").addClass("active")
       }
    })

    </script>

CSS

<style>
#container .question{
    display:none
}
#container .active{
    display:inline-block;
}
</style>

JS FIDDLE

http://jsfiddle.net/vrnxL9n8/

edit: added js fiddle link

Answer 3

First, regroup your class with unique name and add id to your back and forward button (To apply clicks events). Example :

<input type="image" src="forward.gif" alt="Next" id="forwardQ">
<input type="image" src="back.gif" alt="Back" id="nextQ">
<div class="question">
 <img src ="images/green_question1.png" width="100%" height="100%"></img>
</div>

<div class="question">
 <img src ="images/green_question2.png" width="100%" height="100%"></img>
</div>

<div class="question">
 <img src ="images/green_question3.png" width="100%" height="100%"></img>
</div>

<div class="question">
 <img src ="images/green_question4.png" width="100%" height="100%"></img>
</div>

With JQuery:

var actual = 0; // select by default the first question

$(document).ready(function() {
 var number_of_question = $('.question').length; // get number of questions

 $('.question:gt(' + actual + ')').hide(); // Hide unselect question
 $('#nextQ').click(function() {
  if(actual < number_of_question - 1 ) {
    changeQuestion(actual + 1); // display select question
  }
 });
 $('#forwardQ').click(function() {
  if(actual) {
    changeQuestion(actual - 1); // display select question
  }
 });
});

function changeQuestion( newQuestion ) {
 $('.question:eq(' + actual +')').hide(); // hide current  question
 $('.question:eq(' + newQuestion +')').show();   // show new question
 actual = newQuestion; // memorize actual selection
}

Answer 4

You can achieve this by combining HTML, CSS and jQuery.

In the below example I am displaying only the div elements with class active and hiding the other divs. And adding the class active to appropriate divs when ever the user clicks on the Next or Previous button.

HTML Code

<input type="button" value="Next" id="next_qs">
<input type="button" value="Back"  id="prev_qs">

<div class="question_one">
QS1
</div>

<div class="question_two">
QS2
</div>

<div class="question_three">
QS3
</div>

<div class="question_four">
QS4
</div>

CSS Code

div {
    width: 300px; height: 200px; border: 1px solid #333; clear: both; display: none;
}

div.active {
    display: block;
}

jQuery Code

$("div:first").addClass('active')

$("#next_qs").click(function() {
$("div.active").removeClass('active').next().addClass('active');
});

$("#prev_qs").click(function() {
$("div.active").removeClass('active').prev().addClass('active');
});

http://jsfiddle.net/27gwy14f/