JSFiddle - React, Tailwind, and code Playground

by Serge Zahharenko

HTML

<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<br/><br/>
<a href="#n" id="more">more</a>

CSS

* {padding:0;margin:0;list-style-type:none;}
ul {width:600px;overflow:hidden;position:relative;height:270px;padding:5px;background:red;}
li {width:250px;margin:5px;height:80px;background:#ccc;text-align:center;float:left;position:relative;}

JavaScript

var n = 6;
$(document).ready(function(){
    $('#more').click(function(e){
        e.preventDefault();
        more();
    })
});
function more() {
    var newlist = '';    
    for (i=0; i<6; i++)
    {
       n++;
       newlist += '<li>'+n+'</li>';
    }
    $('#list').append(newlist).css({'padding-left':600,width:0});
    $('#list').animate({'padding-left':0,width:600},500);
    $('#list li:lt(6)').css('position','absolute').animate({
        opacity: 0
    },500, function(){
        $(this).remove();
        
    });
}