JSFiddle - React, Tailwind, and code Playground

by isqua

HTML

<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
<button class="list-show-more">Показать ещё</button>

CSS

.hidden {
    display: none;
}

JavaScript

var list = document.querySelector('.list'),
    listItems = list.querySelectorAll('li'),
    showMoreButton = document.querySelector('.list-show-more'),
    showedItemsNumber = 4,
    showOnClick = 2;

function getItemsToShow() {
    var start = showedItemsNumber;
    
    showedItemsNumber = Math.min(showedItemsNumber + showOnClick, listItems.length);
    
    return Array.prototype.slice.apply(listItems, [
        start,
        showedItemsNumber
    ]);
}

Array.prototype.forEach.call(listItems, function(item, i) {
    if (i > showedItemsNumber - 1) {
        item.classList.add('hidden');
    }
});

showMoreButton.addEventListener('click', function() {
    getItemsToShow().forEach(function(item) {
        item.classList.remove('hidden');
    });
});