JSFiddle - React, Tailwind, and code Playground

HTML

<a data-toggle="#div1">link 1</a>
<a data-toggle="#div2">link 2</a>
<a data-toggle="#div3">link 3</a>
<a data-toggle="#div4">link 4</a>

<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div id="div3">div 3</div>
<div id="div4">div 4</div>

CSS

div:not(#div1) {
    display: none;
}
a{
  cursor: pointer;
  padding: 10px;

}

div{
  text-align:center;
  border: 1px solid #494949;
  border-radius: 10px;padding: 20px 35px;
  width: 90px;height: 25px;
  margin:10px; background-color: #238274;
}

JavaScript

$("a[data-toggle]").on("click", function() {
  //e.preventDefault();  // prevent navigating
  var selector = $(this).data("toggle");  // get corresponding element
  $("div").hide();
  $(selector).show();
});