JSFiddle - React, Tailwind, and code Playground

by jquerybyexample

HTML

<ul id="ui_control">
    <li>Shows</li>
    <li><a href="#" class="current">2</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">6</a></li>
    <li>rows</li>
</ul>
<ul id="ui_body">
    <li>Data row 1</li>
    <li>Data row 2</li>
    <li>Data row 3</li>
    <li>Data row 4</li>
    <li>Data row 5</li>
    <li>Data row 6</li>   
</ul>

JavaScript

var $links = $('#ui_control li a');
var topIndex = 0;
var rows = 2;

displayContent(rows);
        
$links.click(function() {
    rows = $(this).text();
    displayContent(rows);
        $links.fadeIn("fast").removeClass("current").addClass("none");
        $(this).fadeIn("fast").addClass("current");
        return false;
})

function displayContent(rows) {
    $('#ui_body li').hide(0)
           .slice(0, rows )
           .show();
    topIndex += rows ;
}