JSFiddle - React, Tailwind, and code Playground

by homsAU

HTML

<div class="menu-clinical-materials">
    <ul>
        <li class="menu-item-has-children"><a>Clinical Studies &amp; Articles</a>

            <ul class="sub-menu" style="display: none;">
                <li><a target="_blank" href="">Link 1</a>

                </li>
                <li><a target="_blank" href="">Link 2</a>

                </li>
                <li><a target="_blank" href="">Link 3</a>

                </li>
                <li><a target="_blank" href="">Link 4</a>

                </li>
                <li><a target="_blank" href="">Link 5</a>

                </li>
            </ul>
        </li>
        <li class="menu-item-has-children"><a>Counseling Sheets</a>

            <ul class="sub-menu" style="display: none;">
                <li><a target="_blank" href="">Link 1</a>

                </li>
                <li><a target="_blank" href="">Link 2</a>

                </li>
                <li><a target="_blank" href="">Link 3</a>

                </li>
                <li><a target="_blank" href="">Link 4</a>

                </li>
                <li><a target="_blank" href="">Link 5</a>

                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

.widget_nav_menu .menu-item-has-children {
    cursor: pointer;
}
span.expander {
    cursor: pointer;
    width: 20px;
    display: inline-block;
}
.menu-item-has-children {
    cursor: pointer;
}
.sub-menu li {
    padding-left: 20px;
}

JavaScript

jQuery.noConflict();
jQuery(document).ready(function () {
    jQuery(".menu-item-has-children:has(ul)").prepend("<span class=\"expander\">+</span>");
    jQuery(".expander").click(function () {
        jQuery(this).html(jQuery(this).html() == "+" ? "-" : "+");
        jQuery(this).toggleClass("expanded").siblings("ul").slideToggle();
        return false;
    }).eq(0).addClass("expanded").end().slice(1).siblings("ul").hide();
});