Hybreeder Hybreeder - 6 months ago 15
jQuery Question

How to call section one by one after clicked on button and previous section will hide?

I have 3

sections
and one
button
.


  1. When the user clicks on the
    button
    for the first time, the contents of the first
    section
    should be displayed.

  2. When the user clicks on the same button for the second time, the second section should be displayed and the first section should be hidden.

  3. Same thing on section third section.



Please help me in this.

<section id="one" style="display:none;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
</section>

<section id="two" style="display:none;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</section>

<section id="three" style="display:none;">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</section>

<input type="submit" onclick="checkDiv();">

<script>
function checkDiv(){
document.getElementById('one').style.display = "block";
}
</script>

Answer

if you include jquery to your project you could do it like so:

function next() {
  var current = $('.current');
  var next = current.next('.m-div:first');
  
  // loop back to the first div
  if(next.length == 0) { next = $('#one'); }
  
  current.removeClass('current');
  next.addClass('current');
}
.m-div {display: none;}

.m-div.current {
  display: block;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="m-div current" id="one" >
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
</section>

<section class="m-div" id="two">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</section>


<section class="m-div" id="three">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</section>

<input type="submit" onclick="next();">