SO example

SO example

by Csaba Hellinger

HTML

<table onmouseleave="closeDrawers()">

 <tr onmouseover="openDrawer(1)">
   <td>col 1-1</td>
   <td>col 1-2</td>
   <td>col 1-3</td>
 </tr>

  <tr id="drawer-1" class="drawer" style="display:none;">
   <td>col 2-1</td>
   <td>col 2-2</td>
   <td>col 2-3</td>
  </tr>

  <tr onmouseover="openDrawer(2)">
   <td>col 3-1</td>
   <td>col 3-2</td>
   <td>col 3-3</td>
  </tr>

  <tr id="drawer-2" class="drawer" style="display:none;">
   <td>col 4-1</td>
   <td>col 4-2</td>
   <td>col 4-3</td>
  </tr>

</table>

JavaScript

function openDrawer(drawer_id){
    closeDrawers();
    var drawer = document.getElementById("drawer-" + drawer_id);
    drawer.style.display = "";
  }

  function closeDrawers(){
    drawers = Array.from(document.getElementsByClassName("drawer"));
    drawers.forEach(drawer => {
      drawer.style.display = "none";
    });
  }