I have tabs created via <button> and the content of those tabs are in separate <div></div> like this :

function openInfo(evt, toolsName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");         
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(toolsName).style.display = "block";
    evt.currentTarget.className += " active";                
}
<button class="tablinks" onclick="openInfo(event, 'Tab1')">Tab1</button>
<button class="tablinks" onclick="openInfo(event, 'Tab2')">Tab2</button>

<div id="Tab1" class="tabcontent">
    <h5>Title</h5>
    <div class="a">
        <p>Content</p>
    </div>
</div>

but it hides all the contents by default. I’d like Tab1 to be displayed by default first. how do i modify the script?

1

    <div id="Tab1" style="display: block;" class="tabcontent">
        <h5>Title</h5>
        <div class="a">
            <p>Content</p>
        </div>
    </div>
    <div id="Tab2" style="display: none;" class="tabcontent">
        <h5>Title2</h5>
        <div class="a">
            <p>Content2</p>
        </div>
    </div>

If you add more tabs, keep their style display: none. Only tab1 will have style display:block

Use bootstrap tab, in which first tab will always be active if you set it as class=”active” and easy to maintain as well. Follow the link to get idea about bootstrap tabs

Except it your code is fine just show or hide tabs while performing onclick event which tab you want to show or hide simple.

function openInfo(val) {
  if ($("#" + val).hasClass("ActivTab")) {
    $("#" + val).removeClass("ActivTab").addClass("deactivTab")
  } else {
    $("#" + val).addClass("ActivTab").removeClass("deactivTab")
  }
}
.ActivTab {
  display: block
}

.deactivTab {
  display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="tablinks" onclick="openInfo('Tab1')">Tab1</button>
<button class="tablinks" onclick="openInfo('Tab2')">Tab2</button>

<div id="Tab1" class="tabcontent ActivTab">
  <h5>Title</h5>
  <div class="a">
    <p>Content</p>
  </div>
</div>
<div id="Tab2" class="tabcontent deactivTab">
  <h5>Title2</h5>
  <div class="a">
    <p>Content</p>
  </div>
</div>

HTML: On your first tab, add a class of ‘.open’.

CSS:

.tabcontent {
display: none;
}

.tabcontent.open {
display: block;
}

JavaScript: Set this up as a click event. On the click, search for the ‘.tabcontent.open’ element and remove the .open class. Following that up with adding the ‘.open’ class onto the clicked tab. All within the same snippet inside the click.

Easy c:

This code is just to show up data by clicking on any of the tab. What you have to do is I have written a corrected JavaScript code, copy and replace your JS code with this code and you are done.

<script type="text/javascript">

    function openInfo(evt, toolsName) {

        var i, tabcontent, tablinks;

        tabcontent = document.getElementsByClassName("tabcontent");         
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }

        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }

        document.getElementById(toolsName).style.display = "block";
        evt.currentTarget.className += " active";                
    }

    tabcontent = document.getElementsByClassName("tabcontent");         
    for (i = 1; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }



</script>