Showing And Hiding content Using Jquery

Question

Suppose i have a html code like this.

<div class="question">
    <div class="individual_question">1</div>
    <div class="individual_question">2</div>
    <div class="individual_question">3</div>
    <div class="individual_question">4</div>
    <div class="individual_question">5</div>
    <div class="individual_question">6</div>
    <div class="individual_question">7</div>
    <div class="individual_question">8</div>
    <div class="individual_question">9</div>
    <div class="individual_question">20</div>
    <div class="individual_question">11</div>
    <div class="individual_question">12</div>
    <div class="individual_question">13</div>
    <div class="individual_question">14</div>
    <div class="individual_question">15</div>
    <div class="individual_question">16</div>
    <div class="individual_question">17</div>
    <div class="individual_question">18</div>
    <div class="individual_question">19</div>
    <div class="individual_question">20</div>
    <div class="individual_question">21</div>
.......................up to 100
</div>
<button class="next">Next</button>

What i want to do ? When someone click next button i want to add new button previous , hide 1,2,3,4,5 show 6,7,8,9,10 .And again if someone click button it hide 6,7,8,9,10 and show 11,12,13,14,15 and i want to hide next button when 95,96,97,98,99,100 is shown .

I could do up to here

<script>
$(function(){
var question=$(".question div");

question.addClass('hide');  

$(".next").on("click",function{
$("<button></button>",{class="previous",text="previous"}).insertBefore('.next');
$("question div:lt(11)").show();
$("question div:lt(6)").hide();
return false;
});

});
</script>

Is it possible using jquery ? thanks :)

Answer 1

I did try using filters :lt() and :gt() as you have started. I have used .index() for the visible range using :visible filter. Try keeping the Next and Previous buttons in DOM and just hide and show.

**There might be a complication where questions are not in multiple of 10, just console.log() your values and you can fix on your own

Check out the snippet below

$(function(){
  var question=$(".question div");

  question.hide();  
  question.filter(':lt(10)').show();
  $(".prev").hide();

  $(".next").on("click",function(){
    var question=$(".question div");
    var nextSlot = $(".question div:visible").index();
    question.hide();
    var from = nextSlot+10-1;
    var to = nextSlot+20;
    if(to>=question.length){
      to=question.length;
      $(this).hide();
    }
    $(".prev").show();
    question.filter(':lt('+to+'):gt('+from+')').show();
    console.log(':lt('+to+'):gt('+from+')')
  });
  $(".prev").on("click",function(){
    var question=$(".question div");
    var nextSlot = $(".question div:visible").index();
    question.hide();

    var from = nextSlot-10-1;
    var to = nextSlot;
    if(from==-1){
      from=0;
      $(this).hide();
      question.filter(':eq(0)').show();
    }

    $(".next").show();
    question.filter(':lt('+to+'):gt('+from+')').show();
    console.log(':lt('+to+'):gt('+from+')')
  });
});

div.individual_question{border:1px solid #ccc; width:100px; height:100px;float:left;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <button class="prev">Prev</button>
  <button class="next">Next</button>
</div>

<div class="question">
  <div class="individual_question">1</div>
  <div class="individual_question">2</div>
  <div class="individual_question">3</div>
  <div class="individual_question">4</div>
  <div class="individual_question">5</div>
  <div class="individual_question">6</div>
  <div class="individual_question">7</div>
  <div class="individual_question">8</div>
  <div class="individual_question">9</div>
  <div class="individual_question">10</div>
  <div class="individual_question">11</div>
  <div class="individual_question">12</div>
  <div class="individual_question">13</div>
  <div class="individual_question">14</div>
  <div class="individual_question">15</div>
  <div class="individual_question">16</div>
  <div class="individual_question">17</div>
  <div class="individual_question">18</div>
  <div class="individual_question">19</div>
  <div class="individual_question">20</div>
  <div class="individual_question">21</div>
  <div class="individual_question">22</div>
  <div class="individual_question">23</div>
  <div class="individual_question">24</div>
  <div class="individual_question">25</div>
  <div class="individual_question">26</div>
  <div class="individual_question">27</div>
  <div class="individual_question">28</div>
  <div class="individual_question">29</div>
  <div class="individual_question">30</div>
  <div class="individual_question">31</div>
  <div class="individual_question">32</div>
  <div class="individual_question">33</div>
  <div class="individual_question">34</div>
  <div class="individual_question">35</div>
  <div class="individual_question">36</div>
  <div class="individual_question">37</div>
  <div class="individual_question">38</div>
  <div class="individual_question">39</div>
  <div class="individual_question">40</div>
  <div class="individual_question">41</div>
  <div class="individual_question">42</div>
  <div class="individual_question">43</div>
  <div class="individual_question">44</div>
  <div class="individual_question">45</div>
  <div class="individual_question">46</div>
  <div class="individual_question">47</div>
  <div class="individual_question">48</div>
  <div class="individual_question">49</div>
  <div class="individual_question">50</div>
</div>