JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <div id="page">
        <div id="map-content">          
            <div id="map">
            <ul class="europe">
                <li class="es"><a href="#" rel="espana">Espana</a></li>
                <li class="uk"><a href="#" rel="uk">United Kingdom</a></li>
                <li class="fr"><a href="#" rel="france">France</a></li>
            </ul>
        </div>
              <div id="espana" class="text">
              espana
            </div>
            <div id="uk" class="text">
              uk
            </div>    
            <div id="france" class="text">
              france
            </div>                
    </div>

CSS

a{float:left; width:100%;}

.text {float:left; display:none; width:200px; position:fixed; right:0px; background-color:red;}
.active {}

JavaScript

$('ul.europe li a').click( function() {
   curCountry = $(this).attr('rel');
    
    if($(this).hasClass('active')){
        $('#'+curCountry).animate({width:'toggle'},1000);  
        $('#'+curCountry).removeClass('active'); 
        $(this).removeClass('active');         
        
    }else
    {
        $('.text.active').animate({width:'toggle'},1000);
        $('ul.europe li a').removeClass('active');
        $('.text').removeClass('active');
        $('#'+curCountry).animate({width:'toggle'},1000); 
        $('#'+curCountry).addClass('active'); 
        $(this).addClass('active');         
    }
    
});