javascript - JQuery to hide the current div and show the next one - Stack Overflow

admin管理员组

文章数量:1405393

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>

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>

• javascript
• jquery
• html

Share Improve this question Follow edited Apr 20, 2015 at 7:10 Igor Antun 11611 gold badge22 silver badges1414 bronze badges asked Apr 20, 2015 at 6:49 YuvarajYuvaraj 2733 silver badges1010 bronze badges 3

• can you please update your code in fiddle. – stanze Commented Apr 20, 2015 at 6:51
• 1 may be $(this).parent('div').next('div').show(); – Amit Soni Commented Apr 20, 2015 at 6:52
• @Amit Soni, a small typo: .parent('div').next('div') – kapantzak Commented Apr 20, 2015 at 6:53

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

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.

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();
      }
   }
}

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();

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

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;
}); 

本文标签： javascriptJQuery to hide the current div and show the next oneStack Overflow