Tab Panel with JavaScript

tab.js

function openTab(evt, tabName) {
    // Declare all variables
    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
  }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
    
} 

(function () {
    // Get the element with id="defaultOpen" and click on it
    var firstTabBtn = document.getElementById("tab-house");
    firstTabBtn.className = "tablinks active"; 
})();

tab.php

<div class="tab-panel">
    <div class="tab">
        <button id="tab-house" class="tablinks" onclick="openTab(event, 'house')">House</button>
        <button class="tablinks" onclick="openTab(event, 'company')">Company</button>
        <button class="tablinks" onclick="openTab(event, 'institute')">Institute</button>
    </div>

    <!-- Tab content -->
    <div id="house" class="tabcontent">
        <h3>House</h3>
    </div>

    <div id="company" class="tabcontent">
        <h3>Company</h3>
    </div>

    <div id="institute" class="tabcontent">
        <h3>Institute</h3>
    </div>
</div>

tab.scss

.tab-panel{
    margin-bottom: 100px;
    .tab {
        display: flex;
        gap: 30px;
        justify-content: center;
    }
}
#company.tabcontent,
#institute.tabcontent {
	display: none;
}
.tablinks{
    padding: 20px;
    width: 200px;
    text-align: center;
    font-size: 20px;
    background: var(--white);
    border: 2px solid var(--blue);
    border-radius: 10px;
    &.active {
        background: var(--blue);
        border: none;
        font-weight: 600;
    }
}
.tabcontent{
    margin-top: 50px;
}