JSFiddle - React, Tailwind, and code Playground

by BramVanroy

HTML

<div id="list-of-items">
    <ul>
        <li id="item1">item1</li>
        <li id="item2">item2</li>
        <li id="item3">item3</li>
        <li id="item4">item3</li>
    </ul>
</div>

<div id="content1" class="content">content1</div>
<div id="content2" class="content">content2</div>
<div id="content3" class="content">content3</div>
<div id="content4" class="content">content4</div>

CSS

ul {margin-bottom: 1em;}
ul li {display: inline-block;  margin-right: 0.5em;}

.content {
    width: 200px;
    border: 1px solid black;
    height: 1.5em;
    padding: 0.2em;
    margin: 0.4em;
}

JavaScript

$(".content").hide();

$('#list-of-items li').mouseover(function(){
    var $this = $(this);
    $(".content").hide();
    $('#'+$this.attr("id").replace("item","content")).fadeIn("slow");
});