JQuery to hide the current div and show the next one

Question

I have a page that creates 7 div sections and I hide them all except for the first one. Each div has 4 questions in it. Once they answer all the four questions and click the next button I want to hide that div and show the next one. In the final one I will have the submit button. I can't seem to figure it out.

My latest attempt is below.

JQuery call here

$(document).ready(function() {
    $('#1').show();
    $('#2').hide();
    $('#3').hide();
    $('#4').hide();
    $('#5').hide();
    $('#6').hide();
    $('#7').hide();

    $('.article').click(function() { 
        $(this).parent('div').hide();
        $(this).next('div').show();
        return false;
    }); 
});

Example of first two HTML divs here with a lot of guts cut out to save space:

<div name="1" id="1">
    <span class="chapter">Chapter 1</span>
    <p>1. According to this training etc?
        <br>                    
        <input type="hidden" name="0" value="9">
        <input type="radio" name="a0" value="23"> 1.
        <br>
        <input type="hidden" name="0" value="9">
        <input type="radio" name="a0" value="24"> 2.
        <br>
        <input type="hidden" name="0" value="9">
        <input type="radio" name="a0" value="25"> 3.
        <br>
        <input type="hidden" name="0" value="9">
        <input type="radio" name="a0" value="26"> 4.
        <br>
        <br>
        <a href="#" class="article">Next</a>
    </p>
</div>

<div name="2" id="2" style="display: none;">
    <span class="chapter">Chapter  2</span>
    <p>5. question here
        <br>                    
        <input type="hidden" name="4" value="20">
        <br>
        <a href="#" class="article">Next</a>
    </p>
</div>

Answer 1

Here is a good solution.

I have applied class show-hide to your all div, you want to show and hide.

Because in your practical thing if you are going to find it through div means you can not add div in your content box.

So best add this class and make your code robust. You can try it here only.

$(document).ready(function() {
  $('.show-hide').hide();
  $('#1').show();
  $('.article').click(function() {
    $('.show-hide').hide();
    $(this).closest('.show-hide').hide().next('.show-hide').show();
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div name="1" id="1" class="show-hide">
  <span class="chapter">Chapter 1</span>
  <p>1. According to this training etc?
    <br>
    <input type="hidden" name="0" value="9">
    <input type="radio" name="a0" value="23">1.
    <br>
    <input type="hidden" name="0" value="9">
    <input type="radio" name="a0" value="24">2.
    <br>
    <input type="hidden" name="0" value="9">
    <input type="radio" name="a0" value="25">3.
    <br>
    <input type="hidden" name="0" value="9">
    <input type="radio" name="a0" value="26">4.
    <br>
    <br>
    <a href="#" class="article">Next</a>
  </p>
</div>

<div name="2" id="2" style="display: none;" class="show-hide">
  <span class="chapter">Chapter  2</span>
  <p>5. question here
    <br>
    <input type="hidden" name="4" value="20">
    <br>
    <a href="#" class="article">Next</a>
  </p>
</div>

<div name="3" id="3" style="display: none;" class="show-hide">
  <span class="chapter">Chapter  3</span>
  <p>5. question here
    <br>
    <input type="hidden" name="4" value="20">
    <br>
    <a href="#" class="article">Next</a>
  </p>
</div>

<div name="4" id="4" style="display: none;" class="show-hide">
  <span class="chapter">Chapter  2</span>
  <p>5. question here
    <br>
    <input type="hidden" name="5" value="20">
    <br>
    <a href="#" class="article">Next</a>
  </p>
</div>

<div name="5" id="5" style="display: none;" class="show-hide">
  <span class="chapter">Chapter  2</span>
  <p>5. question here
    <br>
    <input type="hidden" name="5" value="20">
    <br>
    <a href="#" class="article">Next</a>
  </p>
</div>

<div name="6" id="6" style="display: none;" class="show-hide">
  <span class="chapter">Chapter  6</span>
  <p>5. question here
    <br>
    <input type="hidden" name="4" value="20">
    <br>
    <a href="#" class="article">Next</a>
  </p>
</div>

<div name="7" id="7" style="display: none;" class="show-hide">
  <span class="chapter">Chapter  7</span>
  <p>5. question here
    <br>
    <input type="hidden" name="4" value="20">
    <br>
    <a href="#" class="article">Next</a>
  </p>
</div>

<div name="8" id="8" style="display: none;" class="show-hide">
  <span class="chapter">Chapter  8</span>
  <p>5. question here
    <br>
    <input type="hidden" name="4" value="20">
    <br>
    <a href="#" class="article">Next</a>
  </p>
</div>

Answer 2

Try this:

// onlclick of next button
$('.next').click(function() { 
    $(this).parents('div').hide();
    $(this).parents('div').next('div').show();

    return false;
});    

// onlclick of prev button
$('.prev').click(function() { 
     $(this).parents('div').hide();
     $(this).parents('div').prev('div').show();

     return false;
}); 

Well, but this works with an assumption that your first div has no prev button and last div has no next button
and also the div which you want to hide or show is the first parent div of your prev/next button

Or else you need to give a class (eg: question) to your question divs which you want to hide or show and then replace
parents('div') with parents('.question') in the above code.

Answer 3

Add a class to all inputs except the first one and set display to none.

.vis {
    display: none;
}

Wrap all the divs in a wrapper div and assign an id container on click call

var next_id = parseint($(this).attr('id')) + 1;

$(this).closest('div').hide();
$(this).closest('.container').find('#' + next_id).show();

Answer 4

You could store all divs in an array and write a function like that:

var divArray = [];
for (var index = 1; index < 8; index++) {
   divArray[divArray.length] = $('#' + index);
}

function showDiv(showIndex) {
   for (var index = 0; index < divArray.length; index++) {
      if (index === showIndex) {
         $(divArray[index]).show();
      }
      else {
         $(divArray[index]).hide();
      }
   }
}

Answer 5

Here JSfiddle link is example

you just need to modify your js

$('#1').show();
$('#2').hide();
$('#3').hide();
$('#4').hide();
$('#5').hide();
$('#6').hide();
$('#7').hide();

$('.article').click(function(){ 
    $(this).parent('div').hide().next('div').show();
    return false;
});