JSFiddle - React, Tailwind, and code Playground

by Dale Howard

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="4">
    <input name="FROM" type="hidden" value="INLINE">
    <!--//will be used under the UDF numeric check -->
    <tbody>
        <tr>
            <input name="UDF_CHAR2" id="UDF_CHAR2_hid" type="hidden" value="" data-field="UDF_CHAR2">
            <input name="UDF_CHAR3" id="UDF_CHAR3_hid" type="hidden" value="true" data-field="UDF_CHAR3">
            <td width="15%" class="alignRight" valign="top"> <span class="mandatory">*</span>
MFH Location</td>
            <td width="35%" valign="top">
                <select name="UDF_CHAR1" class="formStyle" style="width: 85%;" data-field="UDF_CHAR1">
                    <option value="0">-- Select MFH Location --</option>
                    <option value="Aldersgate">Aldersgate</option>
                    <option value="Benton Day Tx">Benton Day Tx</option>
                    <option value="Camp Aldersgate Day Tx">Camp Aldersgate Day Tx</option>
                    <option value="Dacus RTC">Dacus RTC</option>
                    <option value="Fillmore">Fillmore</option>
                    <option value="GH - ES - Little Rock">GH - ES - Little Rock</option>
                    <option value="GH - Fayetteville">GH - Fayetteville</option>
                    <option value="GH - Heber Springs">GH - Heber Springs</option>
                    <option value="GH - Helena">GH - Helena</option>
                    <option value="GH - John Magale">GH - John Magale</option>
                    <option value="GH - Magale Manor">GH - Magale Manor</option>
                    <option value="GH - Mulberry Girls">GH - Mulberry Girls</option>
                    <option value="GH - Searcy">GH - Searcy</option>
                    <option value="Jonesboro - Stone Street">Jonesboro - Stone Street</option>
                    <option value="Magale Day Tx">Magale Day Tx</option>
                    <option value="Maumelle">Maumelle</option>
                    <option...

CSS

.map {
}
.showMap {
    display: inline;
}
.hideMap {
    display: none;
}
path[id^="building"]:hover {
    opacity: 0.5;
}

JavaScript

//grab all paths that begin with the word "room", this gets us all room objects found in svg's
$("path[id^='room']").on({
    mouseover: function () {
        $(this).css({
            opacity: 1
        });
    },
    mouseleave: function () {
        $(this).css({
            opacity: 0.01
        });
        if (lastRoomClicked) {
            $('#' + lastRoomClicked).css({
                opacity: 1
            });
        }
    },
    click: function () {

        if (lastRoomClicked && (lastRoomClicked != $(this).attr('id'))) {
            $('#' + lastRoomClicked).css({
                opacity: 0.01
            });
        }

        lockedRoom = true;
        lastRoomClicked = $(this).attr('id');
        $('[name=siteName]').val($(this).attr('id'));
    }
});

//get all paths that begin with "building", which gets us maps that have more than one building to choose from before showing the floor plan with rooms. 

$("path[id^='building']").on('click', function () {

    //"path[id^='building']"  --this gets all paths "like" the word 'building'
    currentMap = $(this).attr('id');
    switchMap($(this).attr('id'));
    $(this).css({
        opacity: 1
    }); //this is to take away the hover effect after you click, since the mouse never 
    // leaves the path to disengage the opacity effect, the area stays at .5 
    // opacity unless this resets it back to 1. 
});

//Event listener on the MFH location dropdown change event.
var locationEl = $("select[name='UDF_CHAR1']");
locationEl.change(function () {
    currentMap = ''; // set to empty each time the location changes

    if ($(locationEl).val() == 'Fillmore') {
        //alert("fillmore ran");
        currentMap = $(locationEl).val();
        lastMapClicked = ''; //setting to null
        $('.showMap').removeClass('showMap').addClass('hideMap');
        $(fillmoreMapDiv).addClass('showMap').removeClass('hideMap');
        lastMapClicked = $(fillmoreMapDiv); //this makes the Fillmore back button...