JSFiddle - React, Tailwind, and code Playground

by Dmitry Maximov

HTML

<!DOCTYPE HTML>
<ul id="list">
	<li class="list-item">1</li>
	<li class="list-item">2</li>
	<li class="list-item" id="show">Show more...</li>
	<li class="list-item is-hidden">4</li>
	<li class="list-item is-hidden">5</li>
	<li class="list-item is-hidden">6</li>
</ul>

<!-- <button type="button" id="show">Show</button> -->

CSS

.is-hidden {
	display: none;
}

.is-visible {
	display: list-item;
}

JavaScript

'use strict';

var showItemsButton = document.getElementById('show'),
    itemsRoot = document.getElementById('list'),
    listItems = itemsRoot.getElementsByClassName('list-item');

function getRemover(item) {
	return function() {
  	item.classList.remove('is-hidden');
  }
}

function showItems() {
		var timeout = 0;
    
    for (var i = 0; i < listItems.length; i++) {
    		if (listItems[i].classList.contains('is-hidden')) {
          timeout += 500
          
        	setTimeout(getRemover(listItems[i]), timeout);
        }
    }
    showItemsButton.classList.add('is-hidden');
};

showItemsButton.addEventListener('click', showItems);