Collapsible displaying by default. Want them to be hidden

Issue

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';
}

Solution

In your css file, add this to the bottom:

div.jumbotron.tab{
  display:none;
}

That will hide your tabs by default when you load the page because you are specifically targeting any div that has both the "jumbotron" and "tab" classes. Good luck as you continue to learn!

Answered By - TommyJ