Collapsible displaying by default. Want them to be hidden

Question

Attempting to create collapsible buttons. They are showing & collapsing onclick however I'd like them to be hidden by default. Started a personal website project to self teach HTML. What am I missing? Attempted to use button but like the styling of link with href better.

HTML

<div class="container-fluid">
            <div class="jumbotron">
                <div class="row">
                    <h2 class="work_text_mobile" style="margin: auto"><a href="#" class="page-link project" onclick='changeProject("MyUPMC")'>MyUPMC GoLive</a></h2>
                    <h2 class="work_text_mobile" style="margin: auto"><a href="#" class="page-link project" onclick='changeProject("SSO")'>AWS SSO</a></h2>
                    <h2 class="work_text_mobile" style="margin: auto"><a href="#" class="page-link project" onclick='changeProject("S3")'>S3 Static Content</a></h2>
                    <h2 class="work_text_mobile" style="margin: auto"><a href="#" class="page-link project" onclick='changeProject("SSM")'>SSM Replicator</a></h2>
                    <h2 class="work_text_mobile" style="margin: auto"><a href="#" class="page-link project" onclick='changeProject("SeniorDesign")'>Senior Design</a></h2>
                </div>
            </div>
      </div>
      <div class="container-fluid">
            <div class="jumbotron tab" id="MyUPMC" style="background-color: rgb(252,181,20)">
               <h2 style="text-align:center">Blah1</h2>
               <p>Blah...</p>
               <img src="images/myupmc_logo1.png" style="display: block;width: 90%;height: 90%;margin: auto; overflow: hidden">
            </div><div class="jumbotron tab" id="SSO" style="background-color: rgb(252,181,20)">
               <h2 style="text-align:center">Blah2</h2>
               <p>Blah...</p>
               <img src="images/psb.png" style="display: block;width: 90%;height: 90%;margin: auto; overflow: hidden">
            </div><div class="jumbotron tab" id="S3" style="background-color: rgb(252,181,20)">
               <h2 style="text-align:center">Blah3</h2>
               <p>Blah...</p>
               <img src="images/bits_header.jpg" style="display: block;width: 90%;height: 90%;margin: auto; overflow: hidden">
            </div><div class="jumbotron tab" id="SSM" style="background-color: rgb(252,181,20)">
               <h2 style="text-align:center">Blah4</h2>
               <p>Blah...</p>
               <img src="images/full_adder.jpg" style="display: block;width: 90%;height: 90%;margin: auto; overflow: hidden">
            </div>
            <div class="jumbotron tab" id="SeniorDesign" style="background-color: rgb(252,181,20)">
               <h2 style="text-align:center">Senior Design - blah, blah, blah</h2>
               <p>Blah...</p>
               <img src="images/senior_design.jpg" style="display: block;width: 90%;height: 90%;margin: auto; overflow: hidden">
            </div>
      </div>

CSS

.project:link, .project:visited {
  background-color: rgb(252,181,20);
  color: black;
  border: 2px solid black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
.project:hover, .project:active {
  background-color: black;
  color: white;
}
div.jumbotron{
    background-color: #D3D3D3;
    margin-top: 16px;
}

JS

function changeProject(requestedProject){
    var requested_tab = document.getElementById(requestedProject);

    if(requested_tab.style.display == 'block'){
        requested_tab.style.display = "none";
        return;
    }
    var all_tabs = document.getElementsByClassName("tab");
    for(var i = 0; i < all_tabs.length; i++){
        all_tabs[i].style.display = 'none';
    }
    requested_tab.style.display = 'block';
}