JSFiddle - React, Tailwind, and code Playground

by winns

HTML

<html>
<head>
</head>
<body>
    <a href="#" onclick="opcl(mydivs, '.box1'); return false;">button1</a>
    <a href="#" onclick="opcl(mydivs, '.box2'); return false;">button2</a>
    <a href="#" onclick="opcl(mydivs, '.box3'); return false;">button3</a>
    <a href="#" onclick="opcl(mydivs, '.box4'); return false;">button4</a>
    <a href="#" onclick="opcl(mydivs, '.box5'); return false;">button5</a>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
    <div class="box5">box5</div>
</body>
</html>

CSS

.box1, .box2, .box3, .box4, .box5{
    display: none;
    width: 100px; height: 50px;
    background-color: orange;
}

JavaScript

var mydivs=new Array('.box1','.box2','.box3','.box4','.box5');

function opcl(arr, e){
    if ($(e).css('display') == 'none'){
        for(var i in arr){   
           $(arr[i]).hide();     
        }
        $(e).show();       
    }
}