title: next prev in jquery list to show only 5 and hide others
body: <p>I am trying to do this. I fetch the list of DATE's from the table and show them as list and want the prev and next to traverse these date's showing only the 5 at any time. Example, while the page loaded, i will display the recent 5 date's and when prev / next are clicked let it traverse the "lists"(pre-populated from the table) and show accordingly. This is like pagination but i dont really want to use a pagination plugin as my requirement is very simple. when each list/href is clicked, it loads up the content through ajax which is not shown here as that works fine for me. </p>
  
  <p>I need help only to the make this "prev" and "next" traverse the list's(already pulled from table) and show only 5 hiding rest as it traverses. jsfiddle is attached here. please help. thanks.</p>
  
  <p>jQuery:</p>
  
  <pre><code>  $( document ).ready(function() {
  
      $("a.next").click(function(){
          var $toHighlight = $('.active').next().length &gt; 0 ? $('.active').next() : $('.pagination li').first();
          $('.active').removeClass('active');
          $toHighlight.addClass('active');
      });
  
      $("a.prev").click(function(){
          var $toHighlight = $('.active').prev().length &gt; 0 ? $('.active').prev() : $('.pagination li').last();
          $('.active').removeClass('active');
          $toHighlight.addClass('active');
      });
  
  }); // close jquery
  </code></pre>
  
  <p>HTML/PHP :</p>
  
  <pre><code>echo "
  
  &lt;div class='pagination pagination-lg'&gt;
  
  &lt;ul class='pagination'&gt;
  
  ";
  $CID=getinfo(LOGIN);
  $SQL = "SELECT DISTINCT date_format(SENTON,'%Y-%m-%d') as DATE from MESSAGES";
  
  $result = mysql_query($SQL,$LINK);
  $i=0;
  echo "&lt;li id='prev'&gt;&lt;a href='#' class='prev'&gt;Prev&lt;/a&gt;&lt;/li&gt;";
  while ( $rows = mysql_fetch_array($result,MYSQLI_ASSOC) ) {
    $i++;
   echo "&lt;li&gt;&lt;a href='#tab".$CID."day".$i."' id='#tab".$CID."day".$i."' data-toggle='tab' value='$i'&gt;".$rows['DATE']."&lt;/a&gt;&lt;/li&gt;";
   }
  
   echo "
   &lt;li id='next'&gt;&lt;a href='#' class='next'&gt;Next&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <pre><code>&lt;div id='tab".$CID."day1' class='tab-pane'&gt;
  &lt;h4&gt;Day1  Content&lt;/h4&gt;
    &lt;p&gt; and so on ...&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id='tab".$CID."day2' class='tab-pane'&gt;
    &lt;h4&gt;Day2 Content&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div id='tab".$CID."day3' class='tab-pane'&gt;
    &lt;h4&gt;Day3 Content&lt;/h4&gt;
  &lt;/div&gt;
  
    &lt;div id='tab".$CID."day4' class='tab-pane'&gt;
    &lt;h4&gt;Day4 Content&lt;/h4&gt;
  &lt;/div&gt;
  
      &lt;div id='tab".$CID."day5' class='tab-pane'&gt;
    &lt;h4&gt;Day5 Content&lt;/h4&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
   ";
  </code></pre>
  
  <p>Jsfiddle here <a href="http://jsfiddle.net/Mg8fr/" rel="nofollow">http://jsfiddle.net/Mg8fr/</a></p>