title: Jquery hide first 12 elementes, show next 12 elements
body: <p>what i am trying to do is make the first 12 elements hidden and show the next 12 elements.</p>
  
  <pre><code>//this is dynamic loaded content
  &lt;div class="inner-content"&gt;
       &lt;div class="front-pro"&gt;1&lt;/div&gt;
       &lt;div class="front-pro"&gt;2&lt;/div&gt;
       &lt;div class="front-pro"&gt;3&lt;/div&gt;
       &lt;div class="front-pro"&gt;4&lt;/div&gt;
       &lt;div class="front-pro"&gt;5&lt;/div&gt;
       &lt;div class="front-pro"&gt;6&lt;/div&gt;
       &lt;div class="front-pro"&gt;7&lt;/div&gt;
       &lt;div class="front-pro"&gt;8&lt;/div&gt;
       &lt;div class="front-pro"&gt;9&lt;/div&gt;
       &lt;div class="front-pro"&gt;10&lt;/div&gt;
       &lt;div class="front-pro"&gt;11&lt;/div&gt;
       &lt;div class="front-pro"&gt;12&lt;/div&gt;
       &lt;div class="front-pro hidden"&gt;13&lt;/div&gt;
       &lt;div class="front-pro hidden"&gt;14&lt;/div&gt;
       ..... etc (200 divs more)
  &lt;/div&gt;
  &lt;div onclick="SearchNext();"&gt;next&lt;/div&gt;
  </code></pre>
  
  <p>This is my javascript/jquery:</p>
  
  <pre><code>function SearchNext(){
   var first = $('.inner-content').children('.front-pro:hidden:first');
      first.prevAll(':lt(12)').hide();
      first.nextAll(':lt(12)').show();
  }
  </code></pre>
  
  <p>It works one time, after it stops working. (and it skips number 13)
  i want to have 12 new elements visible with each Next click and hide the previous. </p>
  
  <p><strong>UPDATE - this is my end result that works perfectly</strong>
  <a href="https://jsfiddle.net/v7a4308e/1/" rel="nofollow">JSFIDDLE DEMO</a></p>
  
  <p>Thanks to Alex Char </p>
  
  <p><strong>PHP</strong> for creating page numbers, you could do this also with javascript     </p>
  
  <pre><code>//$counter is search results
      $x = 1; 
      $Pnumbers = '';
      while($x &lt;= ceil($counter/12)) {
          if($x == 1){ $ecl = 'bold'; } else{ $ecl = ''; }
         $Pnumbers .= ' &lt;span class="number '.$ecl.' numbering" onClick="GoTo('.$x.');"&gt;'.$x.'&lt;/span&gt; ';
          $x++;
      } 
  
      if($counter &gt; 12){ echo'&lt;div class="page-numbers"&gt;
      &lt;span class="prev number" onclick="GoTo(\'prev\')"&gt;Prev&lt;/span&gt;
      '.$Pnumbers.'
      &lt;span class="next number" onclick="GoTo(\'next\');"&gt;Next&lt;/span&gt;
      &lt;/div&gt;'; }
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>function GoTo(nn) {
        var nng = parseInt($('.page-numbers .numbering.bold').text());
       if(nn == 'next'){
          nn = nng+1; 
       }if(nn == 'prev'){
           nn = nng-1; 
       } 
      //get all child elements with class front-pro 
      //of element with class .inner-content
      var childElems = $(".inner-content .front-pro");
      var totalpages = Math.ceil(childElems.length/12);
      //iterate through the elements
      var first = (nn-1)*12;
      var last = first+11;
      childElems.each(function(i, el) {
  
        //show the elements that match the criteria removing css class
        if (i &gt;= first &amp;&amp; i &lt;= last) {
          $(el).removeClass('hidden');
        } else {
          //hide rest
          $(el).addClass('hidden');
        }
      });
  
      if(nn &gt; 1){ $('.page-numbers .prev').show(); }else{ $('.page-numbers .prev').hide(); }
      if(nn &lt; totalpages){ $('.page-numbers .next').show(); }else{ $('.page-numbers .next').hide(); }
      $('.page-numbers .numbering').removeClass('bold');
      $('.page-numbers .numbering:eq('+(nn-1)+')').addClass('bold');
    }
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.front-pro.hidden{ display:none !important; }
  .prev {  display: none; }
  .page-numbers .number{
  background: #ff0000;  }
  .page-numbers{ text-align:center; }
  .page-numbers .number.bold{ font-weight:bold; background:#000; }
  .page-numbers .number:hover{ background:#000; cursor: pointer; }
  </code></pre>
  
  <p>Make sure that the first 12 divs do not contain the "hidden" class, all the divs that come after should have "hidden" in there class</p>