JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="link" id="1">Open V1</a>
<div id="content-a1" class="show">A1 content is here...</div>
<div id="content-v1" class="dynamic">V1 content is here!</div>
<a href="#"  class="link" id="2" >Open V2</a>
<div id="content-a2" class="show">A2 content is here...</div>
<div id="content-v2" class="dynamic">V2 content is here!</div>
<a href="#"  class="link" id="3" >Open V3</a>
<div id="content-a3" class="show">A3 content is here...</div>
<div id="content-v3" class="dynamic">V3 content is here!</div>

CSS

div{padding:10px; margin:10px;}
.show{border: 1px solid #585858;}
.dynamic{background-color:#ff0000;color:#fff;}

JavaScript

//show a1 hide v1 when dom is loaded
$('.dynamic').hide();

//clicked on .link, so show content-linkid
$('.link').click(function(e){
    e.preventDefault();
    $('#content-a'+this.id).hide();
    $('#content-v'+this.id).show();
});