JSFiddle - React, Tailwind, and code Playground

by Ned Programming

HTML

<ul class="nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 3</li>
<li>Link 3</li>
<li>Link 3</li>
<li>Link 3</li>
<li>Link 3</li>
</ul>

<ul class="output">
<li>Content and output here 1</li>
<li>Content and output here 2</li>
<li>Content and output here 3</li>
<li>Content and output here 3</li>
<li>Content and output here 3</li>
<li>Content and output here 3</li>
<li>Content and output here 3</li>
<li>Content and output here 3</li>
<li>Content and output here 3</li>
</ul>

CSS

.nav li{
    cursor: pointer;
}
.output li{
    visibility:hidden;
}

JavaScript

$(function(){
    $(".nav li").hover(function(){
        $(this).addClass("hover");
        $('.output li')
        .css('visibility', 'hidden')//Hide all the li's
        .eq($(this).index())//Get the li at same index which triggered hover
        .css('visibility', 'visible');//Make it visible
    }, function(){
        $(this).removeClass("hover");
        $('.output li').css('visibility', 'hidden');
    });

});