Jquery Hide First 12 Elementes, Show Next 12 Elements

what i am trying to do is make the first 12 elements hidden and show the next 12 elements. //this is dynamic loaded content

).children('.front-pro:lt(12)').addClass('hidden'); $('.inner-content').children('.front-pro:gt(11)').removeClass('hidden'); $(".next").hide(); $(".prev").show(); } function searchPrev() { $('.inner-content').children('.front-pro:lt(12)').removeClass('hidden'); $('.inner-content').children('.front-pro:gt(11)').addClass('hidden'); $(".next").show(); $(".prev").hide(); }

.front-pro.hidden {
  display: none;
}
.prev {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner-content">
  <div class="front-pro">1</div>
  <div class="front-pro">2</div>
  <div class="front-pro">3</div>
  <div class="front-pro">4</div>
  <div class="front-pro">5</div>
  <div class="front-pro">6</div>
  <div class="front-pro">7</div>
  <div class="front-pro">8</div>
  <div class="front-pro">9</div>
  <div class="front-pro">10</div>
  <div class="front-pro">11</div>
  <div class="front-pro">12</div>
  <div class="front-pro hidden">13</div>
  <div class="front-pro hidden">14</div>
</div>
<div class="next" onclick="searchNext();">next</div>
<div class="prev" onclick="searchPrev();">prev</div>

I create a general solution after your comment with next and previous(I use step 3 for demo purposes but you can use what ever you want):

var pager = (function() {
  /*declare private variables*/
  var first = 0,
    last = 2,
    step = 3;

  function searchNext() {
    //next function
    //increasing first and last variables
    first += step;
    last += step;
    pagerHelper();
  }

  function searchPrev() {
    //previous function
    //decrease first and last variables
    first -= step;
    last -= step;
    pagerHelper();
  }

  function pagerHelper() {
    //get all child elements with class front-pro 
    //of element with class .inner-content
    var childElems = $(".inner-content .front-pro");
    //iterate through the elements
    childElems.each(function(i, el) {
      //show the elements that match the criteria removing css class
      if (i >= first && i <= last) {
        $(el).removeClass('hidden');
      } else {
        //hide rest
        $(el).addClass('hidden');
      }
    });
    nextPreviousToggle(childElems.length);
  }

  function nextPreviousToggle(maxEle) {
    //here the code is to show/hide next/previous buttons
    if (last >= maxEle) {
      $(".next").hide();
    } else {
      $(".next").show();
    }
    if (first === 0) {
      $(".prev").hide();
    } else {
      $(".prev").show();
    }
  }
  return {
    searchNext: searchNext,
    searchPrev: searchPrev
  }
})();

.front-pro.hidden {
  display: none;
}
.prev {
  display: none;
}
.prev:hover,
.next:hover {
  text-decoration: underline;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner-content">
  <div class="front-pro">1</div>
  <div class="front-pro">2</div>
  <div class="front-pro">3</div>
  <div class="front-pro hidden">4</div>
  <div class="front-pro hidden">5</div>
  <div class="front-pro hidden">6</div>
  <div class="front-pro hidden">7</div>
  <div class="front-pro hidden">8</div>
  <div class="front-pro hidden">9</div>
  <div class="front-pro hidden">10</div>
  <div class="front-pro hidden">11</div>
  <div class="front-pro hidden">12</div>
  <div class="front-pro hidden">13</div>
  <div class="front-pro hidden">14</div>
</div>
<span class="next" onclick="pager.searchNext();">next</span>
<span class="prev" onclick="pager.searchPrev();">prev</span>

References

:gt()

:lt()

Solution 2:

You use the following code to handle any number of divs,

var x = $(".inner-content div").hide();

$("div:contains(next)").click(function() {
  var cnt = $(this).data("cnt") || 0;
  if((cnt * 12) > x.length){ cnt = 0; }
  x.hide().filter(":eq("+ (cnt * 12)  + "), :lt(" + ((cnt * 12) + 12) + "):gt(" + (cnt * 12) + ")").show();
  $(this).data("cnt", ++cnt);
});

DEMO

Solution 3:

Try this instead

$('.inner-content').children().each(function (i, x) {
    if (i < 12) // Hide First 12 i.e 0-11
        $(x).addClass('hidden');
    else if (i < 24) // Show Next 12 i.e 12-23
        $(x).removeClass('hidden');
})

Also make sure you have css rule defined as

.hidden {
    display: none;
}