Timeout show

by evilbloodydemon

HTML

<ul id="list">
    <li class="list-item">1</li>
    <li class="list-item">2</li>
    <li class="list-item">3</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);