JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
    <li> Item 1 <span class="open"></span>
        <ul>
            <li> Item 1.1 </li>
            <li> Item 1.2 <span class="open"></span>
                <ul>
                    <li> Item 1.2.3 </li>
                </ul>
            </li>
            <li> Item 1.3 </li>
        </ul>
    </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
    <li> Item 4 </li>
    <li> Item 5 <span class="open"></span>
        <ul>
            <li> Item 5.1 </li>
            <li> Item 5.2 </li>
        </ul>
    </li>
    <li> Item 6 </li>
</ul>

CSS

#menu {
    border: 1px solid #000;
    width: 150px;
}

ul ul {
    padding-left: 15px;
}

li:hover {
    cursor: pointer;
    background-color: #eee;
}

li span {
    font-weight: bold;
}

.close::after {
    content: "-";
    color:#f00;
}

.open::after {
    content: "+";
    color:#0f0;
}

JavaScript

$(function() {
    function setHandleState(span, newState) {
        var previousState = newState === 'open' ? 'close': 'open';
        span.removeClass(previousState).addClass(newState);
    }

    $('ul ul').hide();

    $('li').on('click', function (e) {
        var _this = this;
        e.stopPropagation();

        $(this).parent().children('li').each(function (i, li) {
            var $span = $(li).children('span').first(),
                state = $span.hasClass('open') ? 'close': 'open';

            if (li !== _this) {
                state = 'open';
                $(li).children('ul').hide('slow');
            } else {
                $(li).children('ul').toggle('slow');
            }

            setHandleState($span, state);   
        });
    });
});