JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1" class="hideable">
        div1</div>
    <div id="div2" class="hideable">
        div2</div>
    <div id="div3" class="hideable">
        div3</div>
    <div id="div4" class="hideable">
        div4</div>

CSS

.hideable
        {
            width: 50;
            height: 50;
            border: 1px solid black;
        }

JavaScript

showhide('div1');
function showhide(id) {
  if (document.getElementById) {
    var divid = document.getElementById(id);
    var divs = document.getElementsByClassName("hideable");
    for (var i = 0; i < divs.length; i = i + 1) {
      $(divs[i]).fadeOut("slow");
    }
    $(divid).fadeIn("slow");
  }
  return false;
}