JSFiddle - React, Tailwind, and code Playground

by Pradeep karn rajput

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li class="hidden">3</li>
    <li class="hidden">4</li>
    <li class="hidden">5</li>
    <li class="hidden">6</li>
    <li class="hidden">7</li>
    <li class="hidden">8</li>
</ul>
<a class="load-more" >Load More ...</a>

CSS

li {
    list-style-type: none;
    width: 40px;
    height: 40px;
    border: 1px solid #000;
    margin: 10px;   
}

.hidden { display: none }

.load-more {
     display: block;
    margin: 30px 0 0;
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    background: #eee;
    cursor: pointer;
}

JavaScript

var countShown = $('ul li').not('.hidden').length;
$('.load-more').on('click', function(){    
    var countHidden = $('ul li.hidden');
    for(var i=0; i < countShown; i++) {
        countHidden.eq(i).removeClass('hidden');
    }    
})