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 show_sub(cat) {
    if (!cat) {
        return false;
    }
    else if (document.getElementById(cat)) {
        var parent = document.getElementById(cat),
            sub = parent.getElementsByClassName('sub');
        if (sub[0].style.display == 'inline'){
            sub[0].style.display = 'none';
        }
        else {
            sub[0].style.display = 'inline';
        }
    }
}

document.getElementById('cat').onclick = function(){
    show_sub(this.id);
};