JSFiddle - React, Tailwind, and code Playground

by Amit Vishwakarma

HTML

<div id="container">
   <div id="info">info contents</div>
   <div id="pic">pic contents</div>
   <div id="other">other contents</div>
</div>

<div class="item" data-related="#info">show info</div>
<div class="item" data-related="#pic">show pics</div>
<div class="item" data-related="#other">show other</div>

CSS

#container{
    width:100px;
    height:100px;
    border:1px solid black;
    margin-bottom:10px;
}

JavaScript

$(function(){
 //   $('#container').children().hide(); // initial hiding 

    $('.item').hover(function(){
        var relatedId = $(this).data('related');
        
        $(relatedId).css("opacity","1").siblings().css("opacity","0.2")
    });
});