JSFiddle - React, Tailwind, and code Playground

HTML

<table id="switches">
  <tr id="switch1" style="font-weight: bold;">
      <td>First slide</td>
  </tr>
  <tr id="switch2">
      <td>Second slide</td>
  </tr>
  <tr id="switch3">
      <td>Third slide</td>
  </tr>
  <tr id="switch4">
      <td>Fourth slide</td>
  </tr>
</table>
<div id="slides">
  <div id="slide1">Well well.</div>
  <div id="slide2" style="display:none;">Oh no!</div>
  <div id="slide3" style="display:none;">You again?</div>
  <div id="slide4" style="display:none;">I'm gone!</div>
</div>

CSS

table#switches td { border: 1px solid #ccc; padding: 3px; }

JavaScript

$("#switches tr").mouseover(function () {
    var $this = $(this);
    $("#slides div").hide();
    $("#slide" + $this.attr("id").replace(/switch/, "")).show();
    $("#switches tr").css("font-weight", "normal");
    $this.css("font-weight", "bold");
});