Looking for help with creating collapsible buttons. Currently, they show and collapse onclick, but I want them to be hidden by default. This is part of a personal website project where I am teaching myself HTML. What do I need to change? I tried using buttons but prefer the styling of links with href.
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';
}