JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="test">
<li><a href="#">Triangle</a></li>
<li><a href="#" data-id="square">Square</a></li>
<li><a href="#">Circle</a></li>
</ul>

<div id="square"></div>

CSS

#square{width:200px;height:200px;background:#000}
.active { color: #aaa; }

JavaScript

$(document).ready(function(){
    
    var square = $('#square'),
        test = $('#test');
    
    square.hide();
   
    test.on('click', 'a', function(e){
        e.preventDefault();
    
        if( !$(this).hasClass('active') ){
            
            
            if ( square.is(':visible') ){
              square.hide();
            }
            
            test.find('a').removeClass('active');
            $(this).addClass('active');
        
        }
            
        var id = $(this).data('id');
         
        if( id === 'square' ){
          square.toggle();
        }
        
    });        
    
});