JSFiddle - React, Tailwind, and code Playground

by oceog

HTML

<div id="text-2" class="widget vw-sidebar-blog widget_text">
    <h3 class="widget-title">Categories</h3>	
    <div class="textwidget">
        <ul style="display: block;" class="sub-menu menu-depth-1">
            <li id="menu-item-94" class="sub-menu-item  menu-item menu-item-type-post_type menu-item-object-page dead"> <a href="http://www.sexualhealthhub.com/category/general/" class="menu-link sub-menu-link">
                        <span>General</span></a>

            </li>
            <li id="menu-item-96" class="sub-menu-item  menu-item menu-item-type-post_type menu-item-object-page"> <a href="http://www.sexualhealthhub.com/category/diabetes/" class="menu-link sub-menu-link">
                        <span>Diabetes</span></a>

                <ul style="display: block;" class="sub-menu menu-depth-2">
                    <li id="menu-item-99" class="sub-menu-item  menu-item menu-item-type-post_type menu-item-object-page dead"> <a href="http://www.sexualhealthhub.com/category/diabetes/can-diabetes-cause-erection-problems/" class="menu-link sub-menu-link">
                                <span>Can Diabetes Cause Erection problems</span></a> 
                    </li>
                    <li id="menu-item-98" class="sub-menu-item  menu-item menu-item-type-post_type menu-item-object-page dead"> <a href="http://www.sexualhealthhub.com/category/diabetes/what-are-the-causes-of-diabetes-and-erectile-dysfunction/" class="menu-link sub-menu-link">
                                <span>What are the causes of Diabetes and Erectile Dysfunction</span></a> 
                    </li>
                </ul>
            </li>
            <li id="menu-item-100" class="sub-menu-item  menu-item menu-item-type-post_type menu-item-object-page expand dead"> <a href="http://www.sexualhealthhub.com/category/prostatectomy/" class="menu-link sub-menu-link">
                        <span>Prostatectomy</span></a>

                <ul style="display: none;" class="sub-menu menu-depth-2">
  ...

CSS

.expand {
    color: red;
}

.collapse {
    color: green;
}

.collapse > li {
    display:block;
}
}

JavaScript

jQuery(function ($) {
    $('.textwidget .sub-menu .sub-menu').hide();
    $('.widget_text > div > ul.sub-menu li').addClass('dead');
    $('.textwidget .sub-menu li').has('ul.sub-menu').removeClass('dead').addClass('expand');    

    $('.widget_text > div > ul.sub-menu li:has(ul)').click(function (e) {
        var $li=$(this);
        if ($li.hasClass("expand")) {         
                e.stopPropagation();
                e.preventDefault();
        } else {
            if ($(e.target).parent().is('a')) {return;}
        }
        $li.toggleClass("expand collapse").children('ul').first().slideToggle();
      
    });
});