JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<ul>
    <li id="cat">
        Top 1
        <ul style="display:none" class="sub">
            <li>Sub 1</li>
            <li>Sub 2</li>
            <li>Sub 3</li>
        </ul>
    </li>
    <li>Top 2</li>
    <li>Top 3</li>
    <li>Top 4</li>
</ul>

JavaScript

function eBCN(elem,classN){
    if (!elem || !classN){
        return false;
    }
    else {
        var children = elem.childNodes;
        for (var i=0,len=children.length;i<len;i++){
            if (children[i].nodeType == 1
                &&
                children[i].className == classN){
                    var sub = children[i];
            }
        }
        return sub;
    }
}

function show_sub(cat) {
    if (!cat) {
        return false;
    }
    else if (document.getElementById(cat)) {
        var parent = document.getElementById(cat),
            sub = eBCN(parent,'sub');
        if (sub.style.display == 'inline'){
            sub.style.display = 'none';
        }
        else {
            sub.style.display = 'inline';
        }
    }
}

var D = document,
    listElems = D.getElementsByTagName('li');
for (var i=0,len=listElems.length;i<len;i++){
    listElems[i].onclick = function(){
        show_sub(this.id);
    };
}