JSFiddle - React, Tailwind, and code Playground

by beneverard

HTML

<link rel="stylesheet" href="https://raw.github.com/beneverard/jqPagination/master/css/jqpagination.css">
<script src="https://raw.github.com/beneverard/jqPagination/master/js/jquery.jqpagination.js"></script>
    <div class="some-container">
        <p>My first paragraph</p>
        <p>My second paragraph</p>
        <p>My third paragraph</p>
    </div>

    <div class="pagination">
        <a href="#" class="first" data-action="first">&laquo;</a>
        <a href="#" class="previous" data-action="previous">&lsaquo;</a>               
        <input type="text" readonly="readonly" />
        <a href="#" class="next" data-action="next">&rsaquo;</a>
        <a href="#" class="last" data-action="last">&raquo;</a>
    </div>

JavaScript

$(document).ready(function() {
   
    // hide all but the first of our paragraphs
    $('.some-container p:not(:first)').hide();
    
    $('.pagination').jqPagination({
        max_page    : $('.some-container p').length,
        paged        : function(page) {
            
            // a new 'page' has been requested
            
            // hide all paragraphs
            $('.some-container p').hide();
            
            // but show the one we want
            $($('.some-container p')[page - 1]).show();
            
        }
    });
    
});