JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="bodysystem-excretory">
  <li id="esoph">
    <a href="#" class="info"><span id="esoph-info"><h3>Esophagus</h3><p>This is esophagus information. This is esophagus information. This is esophagus information. This is esophagus information. This is esophagus information. This is esophagus information. This is esophagus information. </p></span></a>
  </li>
<li id="lungs"><a href="#" class="info"><span id="lungs-info"><h3>Lungs</h3></span></a></li>
<li id="bladder"><a href="#" class="info"><span id="bladder-info"><h3>Bladder</h3></span></a></li>
</ul>

CSS

#bodysystem-excretory {
 width: 618px;
 height: 504px;
 background: url("http://inwavemedia.com/temp/excretory.png") no-repeat;
 margin: 10px auto; padding: 0;
 position: relative;
 border: 1px solid #999;
}
#bodysystem-excretory li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
    position: absolute;
}

#bodysystem-excretory a {
    display: block;
/*  text-indent: -9999px;*/
    text-decoration: none;
}

#esoph {
    left: 85px;
    top: 41px;
    width: 46px;
    height: 94px;
    z-index: 10;
}

#lungs {
    left: 76px;
    top: 84px;
    width: 84px;
    height: 68px;
    z-index: 20;
}

#bladder {
    left: 87px;
    top: 148px;
    width: 64px;
    height: 104px;
    z-index: 30;
}

#esoph a {
    height: 94px;
}

#lungs a {
    height: 67px;
}

#bladder a {
    height: 104px;
}

#esoph:hover, #esoph.selected {
    background-image: url("http://inwavemedia.com/temp/excretory.png");
    background-repeat: no-repeat;
    background-position: -25px -561px;
}

#lungs:hover, #lungs.selected {
    background-image: url("http://inwavemedia.com/temp/excretory.png");
    background-repeat: no-repeat;
    background-position: -105px -523px;
}

#bladder:hover, #bladder.selected {
    background-image: url("http://inwavemedia.com/temp/excretory.png");
    background-repeat: no-repeat;
    background-position: -114px -618px;
}

.info span{ 
    display: none
}

.info{
    position:relative;
    z-index:1124;
    color:#000;
}

.selected .info{
    z-index:1125;

}

.selected .info span {
    display:block;
    position:absolute;
    top:-30px;
    left:155px;
    width:370px;
    color:#000;
    background-color:#FFFFFF;
}

JavaScript

var parts = document.getElementById('bodysystem-excretory').getElementsByTagName('li');
function getClickFunction(part) {
    return function() {
        if (part.className == 'selected') {
            part.className = '';
        }
        else {
            for (var i = 0; i < parts.length; i++) {
                parts[i].className = '';
            }
            part.className = 'selected';
        }
    }
}      
for (var i = 0; i < parts.length; i++) {
    parts[i].onclick = getClickFunction(parts[i]);
}