JSFiddle - React, Tailwind, and code Playground

by Christian Mueller

HTML

<div>
  <div id="pri01" class="visible">pri01</div>
  <div id="pri02" class="hide">pri02</div>
  <div id="pri03" class="hide">pri03</div>
  <div id="pri04" class="hide">pri04</div>
  <div id="pri05" class="hide">pri05</div>
  <div id="pri06" class="hide">pri06</div>
</div>

<button id="linktext1">Link 1</button>
<button id="linktext2">Link 2</button>
<button id="linktext3">Link 3</button>
<button id="linktext4">Link 4</button>
<button id="linktext5">Link 5</button>
<button id="linktext6">Link 6</button>

CSS

.visible {
  display: block;
}

.hide {
  display: none;
}

JavaScript

$(document).ready(function() {
  for(var i = 1;i<=6;i++) 
  	$('#linktext'+i).click({param1: i},function(event) {
    	for (var x = 1;x<=6;x++)
        if (x!=event.data.param1)
      		$('#pri0'+x).addClass('hide').removeClass('visible');
    	
      $('#pri0'+event.data.param1).addClass('visible').removeClass('hide');
    });
});