JSFiddle - React, Tailwind, and code Playground

by kiirosora

HTML

<ul id="datalist">
    <li>dataset1</li>
    <li>dataset1</li>
    <li>dataset2</li>
    <li>dataset2</li>
    <li>dataset3</li>
    <li>dataset3</li>
    <li>dataset4</li>
    <li>dataset4</li>
    <li>dataset5</li>
    <li>dataset5</li>
</ul> <span>readmore</span>

CSS

ul li:nth-child(n+3) {
    display:none;
}
ul li {
    border: 1px solid #aaa;
}
span {
    cursor: pointer;
    color: #f00;
}

JavaScript

$(function () {
    $('span').click(function () {
        $('#datalist li:hidden').slice(0, 2).show();
        if ($('#datalist li').length == $('#datalist li:visible').length) {
            $('span ').hide();
        }
    });
});