JSFiddle - React, Tailwind, and code Playground

by GaryC123

HTML

<div id='collapse_menu'> <a id="collapse_icon" onclick="handle_collapse(this);">++</a>Banks
    <ul id="collapse_content">
        <li><a href="http://bank1.com">Bank1</a>
        </li>
        <li><a href="http://bank2.com">Bank2</a>
        </li>
        <li><a href="http://bank3.com">Bank3</a>
        </li>
    </ul>
</div>
<div id='collapse_menu'> <a id="collapse_icon" onclick="handle_collapse(this);">++</a>Theatres
    <ul id="collapse_content">
        <li><a href="http://theatre1.com">theatre1</a>
        </li>
        <li><a href="http://theatre.com">theatre2</a>
        </li>
        <li><a href="http://theatre3.com">theatre3</a>
        </li>
    </ul>
</div>
<script>
        var collapse_icon_collapsed = '++';
        var collapse_icon_expanded = '--';
    function handle_collapse(elm) {
        if (elm.innerHTML == collapse_icon_collapsed) {
            elm.innerHTML = collapse_icon_expanded;
            elm.nextElementSibling.style.display = "block";
        } else if (elm.innerHTML == collapse_icon_expanded) {
            elm.innerHTML = collapse_icon_collapsed;
            elm.nextElementSibling.style.display = "none";
        }
    }
</script>

CSS

#collapse_menu ul {
    display:none;
}
#collapse_menu li {
    font-style:italic;
}
#collapse_icon {
    cursor:pointer;
}