JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
</ul>
<a class="prev">prev</a> | <a class="next">next</a>

CSS

a {
    cursor: pointer;
}

JavaScript

$('ul li:gt(4)').hide();

$('.prev').click(function() {
    var first = $('ul').children('li:visible:first');
    first.prevAll(':lt(5)').show();
    if(first.prevAll().length < 6){
         $('.prev').hide();   
    }
    first.prev().nextAll().hide();
    $('.next').show(); //Now there must be items below so make sure the next link is visible
});

$('.next').click(function() {
    var last = $('ul').children('li:visible:last');
    last.nextAll(':lt(5)').show();
    if(last.nextAll().length < 6){ //We've reached the end so hide the links
        $('.next').hide();
    }
    $('.prev').show(); //Now there must be items above so make sure the prev link is visible
    last.next().prevAll().hide(); 
});