How to Show Hide Element like Tabs using Javascript

Click the "First Tab" and "First Tab" button to switch between hiding and showing the DIV element:

This is the TAB 1 element.

This is the TAB 2 element.

Below is the HTML code

    <button id="showfirsttab">First Tab</button>
    <button id="showsecondtab">Second Tab</button>
    
    <div id="firsttab">
    This is the TAB 1 element.
    </div>
    
    <div id="secondtab">
    This is the TAB 2 element.
    </div>

Below is the CSS Style

    /** Hide Show Element style **/
    .tab-wrapper { margin: 40px auto; }
    button { border: 0; background: none;margin-top: 40px;}
    pre { color: #111111; background: #EFEFEF; margin: 0; overflow-x: scroll; padding: 20px;}
    #firsttab, #secondtab {
      width: 100%;
      padding: 50px 0;
      text-align: center;
      margin-top: 20px;
      margin-bottom: 40px;
    }
    #firsttab {
    	background-color: lightblue;
    }
    #secondtab {
    	background-color: lightgreen;
    }
    .code-wrap { overflow-x: hidden; }

Below is the javascript code

    document.getElementById("secondtab").style.display = "none";
    document.getElementById("showfirsttab").style.pointerEvents = "none";
    document.getElementById("showfirsttab").style.cssText = "border-bottom: solid  3px #5271FF;"
    document.getElementById("showsecondtab").style.cssText = "color: #c4c4c4";
    function rrShowTabOne() {
      var tabonesection = document.getElementById("firsttab");
      var tabtwosection = document.getElementById("secondtab");
      document.getElementById("showfirsttab").style.cssText = "pointer-events:none; color: #333333;border-bottom: solid 3px #5271FF";
      document.getElementById("showsecondtab").style.cssText= "pointer-events:auto;color:#C4C4C4;border:0;";
      if (tabonesection.style.display === "none") {
        tabonesection.style.display = "block";
      } else {
        tabonesection.style.display = "none";
      }
      if (tabtwosection.style.display === "none") {
        tabtwosection.style.display = "block";
      } else {
        tabtwosection.style.display = "none";
      }
    }
    function rrShowTabTwo() {
      var tabtwosection = document.getElementById("secondtab");
      var tabonesection = document.getElementById("firsttab");
      document.getElementById("showfirsttab").style.cssText = "pointer-events: auto;color: #C4C4C4;border:0;";
      document.getElementById("showsecondtab").style.cssText = "pointer-events:none;color: #333333;border-bottom: solid 3px #5271FF";
      if (tabtwosection.style.display === "none") {
        tabtwosection.style.display = "block";
      } else {
        tabtwosection.style.display = "none";
      }
      if (tabonesection.style.display === "none") {
        tabonesection.style.display = "block";
      } else {
        tabonesection.style.display = "none";
      }
    }
    
    var btntabone = document.getElementById("showfirsttab");
    var btntabtwo = document.getElementById("showsecondtab");
    
    btntabone.addEventListener("click", rrShowTabOne);
    btntabtwo.addEventListener("click", rrShowTabTwo);