JSFiddle - React, Tailwind, and code Playground

by Al Kasih

HTML

<div class="options">
    <p> link to the ready div </P> 
<p> link to the second div </P>
<p> link to the third div </P>
<p> link to the last div </P>
</div>
<div class="container">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
</div>

CSS

.container div{ margin:10px;width:100%;height:350px;background: red;float:left;display:none;cursor:pointer;}
.container div:first-child{display : block;}
.show{display: block; }

body p {
    float: left;
    background: yellow;
    margin: 12px;
    
}

JavaScript

$(".options p").hover(function () {
    var ourPick = $("p").index(this) + 1;
    $(".container div").hide();
    $(".container div:nth-child(" + ourPick + ")").show();
});