JSFiddle - React, Tailwind, and code Playground

HTML

<br><br><br><br><br><br><br><br><br><br><br><br><br>

<a href="#sys" id="sys" onclick="avascript:collapsElement(1)" class="to-be-changed"><i class="fa fa-unlock-alt"></i> Основные</a>
<a href="#req" id="req" onclick="javascript:collapsElement(2)" class="to-be-changed"><i class="fa fa-briefcase"></i> Реквизиты </a>
<a href="#con" id="con" onclick="javascript:collapsElement(3)" class="to-be-changed"><i class="fa fa-user-plus"></i> Контакты </a>

<div style="display: none;" id="1"> 
<span style="color: #000">Первый раздел</span>
</div>


<div style="display: none;" id="2"> 
Первый раздел
</div>


<div style="display: none;" id="3"> 
Первый раздел
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

CSS

.to-be-changed {
    color: black;
    padding: 10px 20px;
}
 
.to-be-changed:target {
    border-bottom: 3px solid blue;
}

a {}

JavaScript

var lastOpen;
 function collapsElement(id) {
 if ( document.getElementById(id).style.display != "none" ) {
 document.getElementById(id).style.display = 'none';
 }
 else {
  if(lastOpen !== undefined) {
   lastOpen.style.display = 'none';
  }
  lastOpen = document.getElementById(id);
  document.getElementById(id).style.display = '';
 }
 }