JSFiddle - React, Tailwind, and code Playground

by mubarakpasha

HTML

<ul id="test">
 <li id="sidebarList_1" data-img="imgDiv_1">Image 1</li>
 <li id="sidebarList_2" data-img="imgDiv_2">Image 2</li>
 <li id="sidebarList_3" data-img="imgDiv_3">Image 3</li>
<ul>


<div id="imgDiv_1">
    Image 1
</div>
<div id="imgDiv_2">
    Image 2
</div>
<div id="imgDiv_3">
    Image 3
</div>

CSS

div { display: none }

JavaScript

$("#test").on("mouseover mouseout", "li", function () {
    $("#" + $(this).data("img")).toggle();
});