javascript - What is the appropriate way to add a click event in place of a hover event added to pictures in an org chart? -

i have been tasked take pre-existing code has float event on org chart. when hover on individual on org chart picture pops , displays employees under them.

they don't , changed click event. i've listed code float event example of taking contentfloating , making click event? looking proper syntax please.

}  .orgcontainer .contentstable .contentfloating img {    height: 720px;    width: 960px;  }    /* float content */  .orgcontainer .contentfloating {    border: 2px solid black;    display: none;    position: fixed;  }  .orgcontainer .contentstable:hover .contentfloating {    display: block;    top: 7%;    left: 15%;  }

<div class="contentstable">    <img title="scott plemmons director supplier quality compliance" src="/sites/scm/utas_supp_qual/home_pictures/scott_plemmons.jpg" />    <p>      scott plemmons<br/> director      <br/> supplier quality    </p>    <div class="contentfloating">      <img src="/sites/scm/utas_supp_qual/home_pictures/org_charts/scott_plemmons_chart.jpg" />    </div>  </div>

this example of how add click event handler dom element, , make div appear when click on it.

html

<div class="orgchart">click details</div> <div id="details">details</div> 

css

#details {   position:absolute; } 

javascript

let elements = document.getelementsbyclassname("orgchart"); for(var = 0; < elements.length; i++) {      elements[i].addeventlistener("click", function(e){         // position of element clicked         let clickeditem = e.target;         var rect = clickeditem.getboundingclientrect();         // set details div position , fill content             let details = document.getelementbyid("details");         details.innerhtml = "joe average";         details.style.left = (rect.left + 10) + "px";         details.style.top = (rect.top + 20) + "px";         }); } 

check jsfiddle example here