JSFiddle - React, Tailwind, and code Playground

by softvar

HTML

<button id="MENU1" class="active" onclick="showHide('1');"><center>1</center></button>
        <button id="MENU2" class="inactive" onclick="showHide('2');"><center>2</center></button>
        <button id="MENU3" class="inactive" onclick="showHide('3');"><center>3</center></button>
        <button id="MENU4" class="inactive" onclick="showHide('4');"><center>4</center></button>

        <div id="CONTAINER"></div>

CSS

.active{
        color:#FF6a00;
        background-image:url(images/blackbck.png);
        background-repeat:round;
        background-size:cover;
    }

    .inactive{
        color:black;
        background-image:url(images/orangebck.png);
        background-repeat:round;
        background-size:cover;
    }

JavaScript

function showHide(divId){
        var id = "MENU" + divId;
        var theDiv = document.getElementById(id);
        if(theDiv.style.display=="none"){
            theDiv.style.display="block";
        }else{
            theDiv.style.display="none";
        }    
    
        var data = "<div id='CONTENT'" + divId + ">here somehow wil appear content " + divId + "</div>";
        var print = document.getElementById("CONTAINER");
        print.innerHTML = data;   
    }