JSFiddle - React, Tailwind, and code Playground

HTML

<div class="links"> 
<a class="pseudo-link" href="#" id="link-1">link1</a> 
<a class="pseudo-link align" href="#" id="link-2">link2</a>                    
<a class="pseudo-link align"  href="#" id="link-3">link3</a> 
 
<div id="block-1" class="hidden-text">Текст1</div> 
<div id="block-2" class="hidden-text">Текст2</div> 
<div id="block-3" class="hidden-text">Текст3</div> 
 
</div>

CSS

.pseudo-link { 
 
    text-decoration: none; 
    border-bottom: 1px dashed #999; 
    display:inline; 
} 
 
.hidden-text { 
 
    display: none; 
    padding-top: 10px; 
    font-size: .9em 
} 
 
.align {margin-left: 15px} 

.highlight {background-color: green;}

JavaScript

$(document).ready(function(){
    $('.pseudo-link').click(function(){
        var id = $(this).attr('id').replace(/^\D+/g,'');
        $('.hidden-text:not(#block-' + id + ')').slideUp('fast');
        $('#block-' + id).slideToggle("slow");
        $('.pseudo-link').not($(this)).removeClass('highlight');
        $(this).toggleClass('highlight');
    });
});