JSFiddle - React, Tailwind, and code Playground

by orolo

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/ui-lightness/jquery-ui.css">
<div id="menu"><ul class="ui-widget"><li class="menuHeader"><span class="ui-widget-header">CRM</span><ul class="ui-widget" 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><li class="menuHeader"><span class="ui-widget-header">Project Management</span><ul class="ui-widget" style="display: none; "><li class="menuHeader"><span class="triangle-toggle ui-icon ui-icon-triangle-1-e"></span><span class="ui-widget-header">Reports and Inquires</span><ul class="ui-widget" style="display: none; "><li class="menuItem ui-widget-content"><a href="javascript:openNew('PM.INSURANCE.LISTING','PROJECT.RPTS.W')">Vendor Certificate of Insurance Listing</a></li></ul></li><li class="menuHeader"><span class="triangle-toggle ui-icon ui-icon-triangle-1-e"></span><span class="ui-widget-header">Codes and Setup Maintenance</span><ul class="ui-widget" style="display: none; "><li class="menuItem ui-widget-content"><a href="javascript:openNew('PROJECT.STATUS.CODES','PROJECT.SETUP.W')">Project Status Codes</a></li><li class="menuItem ui-widget-content"><a href="javascript:openNew('MALL.LOCATION.MAINT','PROJECT.SETUP.W')">Mall Location Maint</a></li><li class="menuItem ui-widget-content"><a href="javascript:openNew('LANDLORD.FILE.MAINT','PROJECT.SETUP.W')">Landlord File Maint</a></li><li class="menuItem ui-widget-content"><a href="javascript:openNew('TENANT.COORDINATOR.MAINT','PROJECT.SETUP.W')">Tenant Coordinator Maint</a></li></ul></li></ul></li><li class="menuHeader"><span class="ui-widget-header">Estimating and Proposals</span><ul...

CSS

#menu li:hover {
    cursor: pointer;
}

#menu li.menuItem.ui-widget-content a {
    text-decoration: none;
    font-weight: normal;
}

#menu li.menuHeader .ui-icon {
    float: left;    
    display: inline-block;
    margin-top: 5px;
}

#menu li.menuHeader .ui-widget-header{
    display: block;
}

#menu li.menuHeader {
    display: inline;
}

JavaScript

$('#menu > ul > li.menuHeader > .triangle-toggle').remove();
$('#menu > ul > li.menuHeader, #menu > ul > li.menuHeader > ul > li.menuHeader').children().not('span.ui-widget-header, .triangle-toggle').hide();


$('li.menuHeader > span.ui-widget-header').click(function(event) {

    if (this == event.target) {

        var e = $(this).parent();
        if ($(e).children().is(':hidden')) {
            $(e).children().show();
            $(e).children('.triangle-toggle').toggleClass('ui-icon-triangle-1-e ui-icon-triangle-1-s');
        }
        else {
            $(e).children().not('.triangle-toggle').not(this).hide();
            $(e).children('.triangle-toggle').toggleClass('ui-icon-triangle-1-e ui-icon-triangle-1-s');
        }
    }



});