JSFiddle - React, Tailwind, and code Playground

by orolo

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/smoothness/jquery-ui.css">
<div id="menu" class="ui-widget"><ul><li class="menuHeader ui-widget-header">Menu Header<ul style="display: none; "><li class="menuItem ui-widget-content"><a href="http://www.google.com" target="_blank">Contact Management</a></li><li class="menuItem ui-widget-content"><a href="http://www.google.com" target="_blank">Change Account on Service Call</a></li><li class="menuItem ui-widget-content"><a href="http://www.google.com" target="_blank">Service Call Status Report</a></li></ul></li></ul></div>

CSS

li.menuHeader.ui-widget-header .ui-icon {
    display: inline-block;
}

JavaScript

$('li.menuHeader:has(ul)').click(function(event) {
    if (this == event.target) {
        $(this).children().toggle();
        $(this).prepend('<span class="ui-icon ui-icon-triangle-1-e"></span>');
    }
    return false;
}).click();