Next/Prev

jQuery

by Moe Rayan

HTML

<div class='col-md-6'>
  <div class='legend'>
    <p>Recent Questions</p>
  </div>
  <ul class='list-group qpagination' id='comment_logs'>

    <li id='qprev'><a href='#' class='qprev'>prev</a></li>
    <li class='list-group-item'><span class='badge bg-blue'>Open</span><a href='#'> Test 1</a></li>
    <li class='list-group-item'><span class='badge bg-blue'>Open</span><a href='#'> Test 2</a></li>
    <li class='list-group-item'><span class='badge bg-blue'>Open</span><a href='#'> Test 3</a></li>
    <li class='list-group-item'><span class='badge bg-blue'>Open</span><a href='#'> Test 4</a></li>
    <li class='list-group-item'><span class='badge bg-blue'>Open</span><a href='#'> Test 5</a></li>
    <li class='list-group-item'><span class='badge bg-blue'>Open</span><a href='#'> Test 6</a></li>
    <li class='list-group-item'><span class='badge bg-blue'>Open</span><a href='#'> Test 7</a></li>
    <li class='list-group-item'><span class='badge bg-blue'>Open</span><a href='#'> Test 8</a></li>
    <li id='qnext'><a href='#' class='qnext'>Next</a></li>
  </ul>
</div>

JavaScript

$(document).ready(function() {
  var $pagination = $('.qpagination');
  var $lis = $pagination.find('li:not(#qprev, #qnext)');
  $lis.filter(':gt(4)').hide();
  $lis.filter(':lt(5)').addClass('active');

  var $next = $('#qnext').click(function() {
    var idx = $lis.index($lis.filter('.active:last')) || 0;

    var $toHighlight = $lis.slice(idx + 1, idx + 6);
    if ($toHighlight.length == 0) {
      $prev.show();
      return;
    }

    $next.show();
    $lis.filter('.active').removeClass('active').hide();
    $toHighlight.show().addClass('active')
  });

  var $prev = $('#qprev').click(function() {
    var idx = $lis.index($lis.filter('.active:first')) || 0;

    var start = idx < 4 ? 0 : idx - 4;
    var $toHighlight = $lis.slice(start, start + 5);
    if ($toHighlight.length == 0) {
      $prev.hide();
      return;
    }

    $next.show();
    $lis.filter('.active').removeClass('active').hide();
    $toHighlight.show().addClass('active')
  });

});