JSFiddle - React, Tailwind, and code Playground

by redler

HTML

<ul id="foo">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
    <li>Item Six</li>
</ul>

<a id="reveal" href="#">Slide Down</a>

CSS

.hide { display: none; }

JavaScript

(function getChildNodes(id, num) {
    var obj = document.getElementById(id),
        children = obj.childNodes,
        result = [],
        elemcounter = 0;

    for (var i = 0; i < children.length; i++) {
        if (children[i].nodeType === 1) { // elements only
            elemcounter++;
            if (elemcounter > num) {
                children[i].className = 'hide';
            }
        }
    }
}('foo', 3));

document.getElementById('reveal').onclick = function() {
    var items = document.getElementsByTagName('li');
    for( var i = 0; i < items.length; i++ ){
        var tempclass = items[i].className;
        items[i].className = tempclass === 'hide' ? '' : tempclass;   
    }
}