JSFiddle - React, Tailwind, and code Playground

by Graham Walters

HTML

<p align="center" id="temp_menuOpener">[Click Here to Toggle Menu]</p>
<div id="temp_menu">
  <table cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td class="ui-corner-bl ui-corner-br cus-dialog-content">
        <div id="menu">
          <div class="spacer">
            <img src="http://www.iwactite.com/images/menu/spacer.png" border="0" title=""
            alt="">
          </div>
          <div class="menu schedOpener">
            <img src="http://www.iwactite.com/images/menu/schedule.png" border="0"
            title="Schedule" alt="Schedule">
          </div>
          <div class="spacer">
            <img src="http://www.iwactite.com/images/menu/spacer.png" border="0" title=""
            alt="">
          </div>
          <div class="menu empOpener">
            <img src="http://www.iwactite.com/images/menu/employees.png" border="0"
            title="Employees" alt="Employees">
          </div>
          <div class="spacer">
            <img src="http://www.iwactite.com/images/menu/spacer.png" border="0" title="" alt="">
          </div>
          <div class="menu">
            <img src="http://www.iwactite.com/images/menu/reference.png" border="0" title="References"
            alt="References">
          </div>
          <div class="spacer">
            <img src="http://www.iwactite.com/images/menu/spacer.png" border="0" title="" alt="">
          </div>
          <div class="menu">
            <img src="http://www.iwactite.com/images/menu/liveview.png" border="0" title="Live View" alt="Live View">
          </div>
          <div class="spacer">
            <img src="http://www.iwactite.com/images/menu/spacer.png" border="0" title="" alt="">
          </div>
          <div class="menu settingsOpener">
            <img src="http://www.iwactite.com/images/menu/settings.png" border="0" title="Settings" alt="Settings">
          </div>
          <div class="spacer">
            <img src="http://www.iwactite.com/images/menu/spacer.png"...

CSS

@import url("http://www.iwactite.com/test/stylesheets/main.css");
 @import url("http://www.iwactite.com/test/stylesheets/dialogBox.css");

JavaScript

$('.schedOpener').click(function () {
         $('div#submenu_sched').toggle();
         $('div#submenu_employee').hide();
         $('div#submenu_settings').hide();
     });

     $('.empOpener').click(function () {
         $('div#submenu_employee').toggle();
         $('div#submenu_sched').hide();
         $('div#submenu_settings').hide();
     });
     $('.settingsOpener').click(function () {
         $('div#submenu_settings').toggle();
         $('div#submenu_sched').hide();
         $('div#submenu_employee').hide();
     });
     $("#temp_menu").dialog({
         autoOpen: false,
         width: 'inherit'
     });
     $("#temp_menuOpener").click(function () {
         $("#temp_menu").dialog("open");
     });
              if (schedAll_pageID == true) {
            $('div#submenu_sched').show();
            var empStats_pageID = false;
            var settings_pageID = false;
          }
          if (empStats_pageID == true) {
            $('div#submenu_employee').show();
            var schedAll_pageID = false;
            var settings_pageID = false;
          }
          if (settings_pageID == true) {
            $('div#submenu_settings').show();
            var schedAll_pageID = false;
            var empStats_pageID = false;
          }