JSFiddle - React, Tailwind, and code Playground

by s4ty

HTML

<ul id="nav">
    <li>
        <a href="#">Cat1</a>
    </li>
    <li>
        <a href="#">Cat2</a>
    </li>
    <li>
        <a href="#">Cat3</a>
    </li>
</ul>
<div id="thumbs">
    <div id="thumb-cat1" class="thumb-container">
        <img src="" alt="Thumb"/>
        <img src="" alt="Thumb"/>
        <img src="" alt="Thumb"/>
        <img src="" alt="Thumb"/>
    </div>
    <div id="thumb-cat2" class="thumb-container">
        <img src="" alt="Thumb"/>
        <img src="" alt="Thumb"/>
    </div>
    <div id="thumb-cat3" class="thumb-container">
        <img src="" alt="Thumb"/>
        <img src="" alt="Thumb"/>
        <img src="" alt="Thumb"/>
        <img src="" alt="Thumb"/>
        <img src="" alt="Thumb"/>
        <img src="" alt="Thumb"/>
        <img src="" alt="Thumb"/>        
    </div>    
</div>

CSS

.thumb-container{ display: none; }

JavaScript

$(function(){
    
    $('#nav a').hover(
        
        function(){
            $('#thumbs .thumb-container')
                .eq($(this).parent().index())
                .show(500);
        },
        function (){
            $('#thumbs .thumb-container')
                .eq($(this).parent().index())
                .hide(500);
        }
    ) 
        
})