jquery pagination slice jquery-pagination

show divs' 3 to 5 jQuery

I am creating a tab content pagination. What I need here is I need to show and hide divs' according to the selected paginate item value. I need to show 3 divs in the content at a time. User can use pagination to paginate the other contents in the current tab.

I tried using slice and lt. When I going forward it is working fine. But I don't know how can I get those back when I reverse.

<div role="tabpanel" class="active" id="tab1">
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
    <div class="foo">Contents going here</div>
</div>
<div class="tab" id="tab2"></div
<div class="tab" id="tab3"></div>

<ul class="pagination">
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
</ul>

$('.foo').filter(':lt(' + sItems + '),:gt(' + sTo + ')').fadeOut(300);

I am passing sItems and sTo as variable values.

What I need is show divs' which is in between sItems and sTo. It can be 1 to 3, 4 to 6 etc, according to the pagination value selected.

Solution

Here is a Working JsFiddle , And the code is as below

$(function() {
  $('div.foo').hide(); //initially hide all the div's on page load.


  $.each($('div.tab'), function() {
    var $currTab = $(this);

    //create Li tags dynamically
    var totalListToBuild = ($currTab.find('div.foo').length) / 3;
    for (var i = 0; i < totalListToBuild; i++) {
      $currTab.find('ul.pagination').append('<li><a href="#">' + (i + 1) + '</a></li>');
    }

    $currTab.find('.pagination li a').on('click', function(e) { // bind events
      e.preventDefault();
      var currIndex = $(this).text();
      $currTab.find('div.foo').hide();
      var start = (currIndex * 3) - 3;
      var end = (currIndex * 3);

      $currTab.find(".foo").slice(start, end).show();
    });

    $currTab.find('.pagination li a:eq(0)').trigger('click'); //trigger first page click
  });



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="tabpanel" class="tab active" id="tab1">
  <div class="foo">Contents going here 1</div>
  <div class="foo">Contents going here 2</div>
  <div class="foo">Contents going here 3</div>
  <div class="foo">Contents going here 4</div>
  <div class="foo">Contents going here 5</div>
  <div class="foo">Contents going here 6</div>
  <div class="foo">Contents going here 7</div>
  <div class="foo">Contents going here 8</div>
  <div class="foo">Contents going here 9</div>
  <div class="foo">Contents going here 10</div>
  <div class="foo">Contents going here 11</div>
  <div class="foo">Contents going here 12</div>
  <div class="foo">Contents going here 13</div>
  <div class="foo">Contents going here 14</div>
  <div class="foo">Contents going here 15</div>
  <div class="foo">Contents going here 16</div>
  <div class="foo">Contents going here 17</div>
  <div class="foo">Contents going here 18</div>
  <div class="foo">Contents going here 19</div>
  <div class="foo">Contents going here 20</div>
  <div class="foo">Contents going here 21</div>

  <ul class="pagination">

  </ul>
</div>
<div class="tab" id="tab2">
  <div class="foo">Contents going here 1</div>
  <div class="foo">Contents going here 2</div>
  <div class="foo">Contents going here 3</div>
  <div class="foo">Contents going here 4</div>
  <div class="foo">Contents going here 5</div>
  <div class="foo">Contents going here 6</div>
  <div class="foo">Contents going here 7</div>
  <div class="foo">Contents going here 8</div>
  <div class="foo">Contents going here 9</div>
  <div class="foo">Contents going here 10</div>
  <div class="foo">Contents going here 11</div>
  <div class="foo">Contents going here 12</div>
  <div class="foo">Contents going here 13</div>
  <div class="foo">Contents going here 14</div>
  <div class="foo">Contents going here 15</div>
  <div class="foo">Contents going here 16</div>
  <div class="foo">Contents going here 17</div>
  <div class="foo">Contents going here 18</div>
  <div class="foo">Contents going here 19</div>
  <div class="foo">Contents going here 20</div>
  <div class="foo">Contents going here 21</div>

  <ul class="pagination">

  </ul>
</div>
<div class="tab" id="tab3">
  <div class="foo">Contents going here 1</div>
  <div class="foo">Contents going here 2</div>
  <div class="foo">Contents going here 3</div>
  <div class="foo">Contents going here 4</div>
  <div class="foo">Contents going here 5</div>
  <div class="foo">Contents going here 6</div>
  <div class="foo">Contents going here 7</div>
  <div class="foo">Contents going here 8</div>
  <div class="foo">Contents going here 9</div>
  <div class="foo">Contents going here 10</div>
  <div class="foo">Contents going here 11</div>
  <div class="foo">Contents going here 12</div>
  <div class="foo">Contents going here 13</div>
  <div class="foo">Contents going here 14</div>
  <div class="foo">Contents going here 15</div>
  <div class="foo">Contents going here 16</div>
  <div class="foo">Contents going here 17</div>
  <div class="foo">Contents going here 18</div>
  <div class="foo">Contents going here 19</div>
  <div class="foo">Contents going here 20</div>
  <div class="foo">Contents going here 21</div>

  <ul class="pagination">

  </ul>
</div>