JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Содержимое левой колонки -->
<div class="left-menu" style="">
	<ul>
		<li class=""><a id="#block1" class="open_links" href="#" data-target="#block1">Первое</a></li>
		<li class=""><a id="#block2" class="open_links" href="#" data-target="#block2">Второе</a></li>
		<li class=""><a id="#block3" class="open_links" href="#" data-target="#block3">Третье</a></li>
	</ul>
</div>

<div id="block1" class="right-content display_body">
			ПервоеПервоеПервое<br>
			ПервоеПервоеПервоеПервое<br>
			ПервоеПервоеПервое<br>
			ПервоеПервое<br>
			ПервоеПервое<br>
</div>
<div id="block2" class="right-content display_body">
			второевтороевторое<br>
			второевторое<br>
			второевтороевторое<br>
			второевторое<br>
			второевторое<br>
</div>
<div id="block3" class="right-content display_body">
			третье<br>
			третьетретьетретье<br>
			третьетретьетретьетретье<br>
			третьетретьетретье<br>
			третьетретье<br>
</div>

CSS

div {border:1px solid #777;}
ul {padding:20px;}

.left-menu { 
    width: 25%;
    padding-right: 2%;
	padding-left:2%;
	padding-top:2%;
	padding-bottom:2%;
}
.right-content { 
    width: 76%;
    padding: 2%;
    padding-left:30%;
    min-width: 722px;
}
.open_links {cursor:pointer;}
.display_body {
	display:none;
	padding:20px;
 }

JavaScript

$(".open_links").on("click",function(){
   $target = $(this).attr("data-target").trim();
    
    //Проверка если нет такого элемента или селектор пустой
   if($target == "" || $($target).length == 0) return false;
    
   $visible   = $(".right-content:visible");
    
   if($visible.length > 0){ 
      $visible.hide(300,function(){
          $($target).show(300)
     })
   }else{
          $($target).show(300)
   }
    
    return false; 
})