JSFiddle - React, Tailwind, and code Playground

Pagination divs

by Akram kamal

HTML

<div class="content">1 I have some content</div>
<div class="content">2 I have some content</div>
<div class="content">3 I have some content</div>
<div class="content">4 I have some content</div>
<div class="content">5 I have some content</div>
<div class="content">6 I have some content</div>
<div class="content">7 I have some content</div>
<div class="content">8 I have some content</div>
<div class="content">9 I have some content</div>
<div class="content">10 I have some content</div>
<div class="content">11 I have some content</div>
<div class="content">12 I have some content</div>

<ol id="pagin">
            <li><a class="current" href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
</ol>

CSS

.content {
    margin: 1px;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    float: left;
    background-color: gray;
}

#pagin {
    clear: both;
    padding:0;
    width:250px;
    margin:0 auto;
}
#pagin li {
    float:left;
    margin-right:10px;
}
#pagin li a {
    display:block;
    color:#717171;
    font:bold 11px;
    text-shadow:0px 1px white;
    padding:5px 8px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow:0px 1px 3px 0px rgba(0,0,0,0.35);
    -moz-box-shadow:0px 1px 3px 0px rgba(0,0,0,0.35);
    box-shadow:0px 1px 3px 0px rgba(0,0,0,0.35);
    background:#f9f9f9;
    background:-webkit-linear-gradient(top,#f9f9f9 0%,#e8e8e8 100%);
    background:-moz-linear-gradient(top,#f9f9f9 0%,#e8e8e8 100%);
    background:-o-linear-gradient(top,#f9f9f9 0%,#e8e8e8 100%);
    background:-ms-linear-gradient(top,#f9f9f9 0%,#e8e8e8 100%);
    background:linear-gradient(top,#f9f9f9 0%,#e8e8e8 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9',endColorstr='#e8e8e8',GradientType=0 );
}
#pagin li a.current {
    color:white;
    text-shadow:0px 1px #3f789f;
    -webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,0.8);
    -moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,0.8);
    box-shadow:0px 1px 2px 0px rgba(0,0,0,0.8);
    background:#7cb9e5;
    background:-webkit-linear-gradient(top,#7cb9e5 0%,#57a1d8 100%);
    background:-moz-linear-gradient(top,#7cb9e5 0%,#57a1d8 100%);
    background:-o-linear-gradient(top,#7cb9e5 0%,#57a1d8 100%);
    background:-ms-linear-gradient(top,#7cb9e5 0%,#57a1d8 100%);
    background:linear-gradient(top,#7cb9e5 0%,#57a1d8 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5',endColorstr='#57a1d8',GradientType=0 );
}
#pagin li a:hover {
    -webkit-box-shadow:0px 1px 3px 0px rgba(0,0,0,0.55);
    -moz-box-shadow:0px 1px 3px 0px rgba(0,0,0,0.55);
    box-shadow:0px 1px 3px 0px rgba(0,0,0,0.55);
   ...

JavaScript

pageSize = 3;

showPage = function(page) {
    $(".content").hide();
    $(".content").each(function(n) {
        if (n >= pageSize * (page - 1) && n < pageSize * page)
            $(this).show();
    });        
}
    
showPage(1);

$("#pagin li a").click(function() {
    $("#pagin li a").removeClass("current");
    $(this).addClass("current");
    showPage(parseInt($(this).text())) 
});