Create drawer effect in a table

Question

I am creating a table with rows. When I mouseover any row, another row immediately below the first with a display=None is changed to display="" which allows it to appear. That is working fine.

I want to put an onmouseleave=function(id), that will hide the second row again when the mouse leaves those two rows. For example, goes to the third row, or off to the side of the page.

The effect is like a drop-down drawer that appears so the user can see more information and click buttons. However, when I put the onmouseleave call in the first row (the one that triggers the second to appear), I can't mouse-over the second row, or else it's triggered to disappear because the mouse left the first row. If I put the mouse-over in the second row, then there is no way for the row to disappear unless it's mouseovered first. So, if I were to exit the side of the first row, it will not disappear because the mouse never goes over it in the first place.

I tried wrapping both rows in a <div>, but that way failed to call the onmouseleave=function(id) function at all. I guess a <div> cannot wrap two <tr>?

How can I allow these two table rows to function as one onmouseleave= ?

This does not allow me to click on second row -> https://jsfiddle.net/tvxpzud8/

This does not work at all-> https://jsfiddle.net/01w9js8x/

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

function closeDrawer(drawer_id) {
  drawer = document.getElementById("drawer-" + drawer_id);
  drawer.style.display = "none";
}

<table>

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

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

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

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

</table>

Answer 1

There might be better solutions, this is just the first thing that came to my mind.

1. Move the onmouseleave from the rows to the table, and change it to hide all drawers. I added a class="drawer" so I can select all of them at once.
2. Leave the onmouseovers where they are, but change the function to hide all drawers, before showing the current one.

See my fiddle.