JSFiddle - React, Tailwind, and code Playground

HTML

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button onclick="myFunction()">Try it</button>
<button onClick="myFunction2()">Try it</button>
<button onClick="myFunction3()">Try it</button>

<div id="myDIV">
This is my DIV element.
</div>

<div id="div2" style="display: none;">
Div2
</div>

<div id="div3" style="display: none;">Div3</div>

CSS

#myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
}
#div2{
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: purple;
    margin-top: 20px;
}

#div3{
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: yellow;
    margin-top: 20px;
}

JavaScript

function myFunction() {
    var x = document.getElementById("myDIV");
    var y = document.getElementById("div2");
    var z = document.getElementById("div3");
    if (x.style.display === "none") {
        x.style.display = "block";
    y.style.display = "none";
        z.style.display = "none";
    }
}

function myFunction2() {
    var x = document.getElementById("div2");
    var y = document.getElementById("myDIV");
    var z = document.getElementById("div3");
    if (x.style.display === "none") {
        x.style.display = "block";     
        y.style.display = "none";
        z.style.display = "none";
    }
}

function myFunction3() {
    var x = document.getElementById("div3");
    var y = document.getElementById("myDIV");
    var z = document.getElementById("div2");
    if (x.style.display === "none") {
        x.style.display = "block";     
        y.style.display = "none";
        z.style.display = "none";
    }
}