JSFiddle - React, Tailwind, and code Playground

HTML

<p id="link1">Content 1</p>
<p id="link2">Content 2</p>
<p id="link3">Content 3</p>

<div class="subcontent">
<div class="hide cont1">
<p>Title</p>
<p>Content 1</p>
</div>
<div class="hide cont2">
<p>Title</p>
<p>Content 2</p>
</div>
<div class="hide cont3">
<p>Title</p>
<p>Content 3</p>
</div>
</div>

CSS

.subcontent{
    box-sizing: border-box;
    border: solid 1px #DDD;
    height:300px;
    width: 70%;
    padding: 0px 15px;
    margin-left: 22%;
    margin-bottom: 10px;
    font-size: 90%;
}
.hide{
    display: none;
}

JavaScript

$("p[id^=link]").click(function(){
        
var currentdivshowid=this.id.replace( /[^\d.]/g, '' );
    $('.hide').not(".cont"+currentdivshowid).hide();
 $(".cont"+currentdivshowid).toggle();
})