JSFiddle - React, Tailwind, and code Playground

by Rejith R Krishnan

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: 13px;
    display: inline-block;
}

JavaScript

//<![CDATA[
jQuery.noConflict();
jQuery(document).ready(function () {
    jQuery(".menu-item-has-children:has(ul)").prepend("<span class=\"Expander\">+</span>");

    jQuery(".menu-item-has-children").click(function () {
        buttonText = jQuery(this).children('.Expander').html() == "+" ? "-" : "+";
        jQuery(this).children('.Expander').html(buttonText);
        jQuery(this).children('.Expander')
        	.toggleClass("Expanded").siblings("ul").slideToggle();
        return false;
    }).eq(0).slice(1).siblings("ul").hide();
    
    jQuery(".sub-menu > li").click(function (e) {
        e.stopPropagation();
    });
});
//]]>