Olá!
Estou com dificuldade em fazer com que ao acessar a página os meus conteúdos de collapse fiquem ocultos.
Tenho 3 botões com conteúdo, e assim que acesso a página no server, os 3 conteúdos aparecem de uma vez.
Eu gostaria que não aparecesse nem um ao iniciar a página e conforme for clicando nos botões ir aparecendo os conteúdos.
Javascript:
function Conteudo(el){
var display = document.getElementById(el).style.display;
if(display == "none")
document.getElementById(el).style.display = 'block';
else
document.getElementById(el).style.display = 'none';}
Html:
<div class="linhas-esquadros" id="linhas-esquadros">
<form style="display: inline" method="get">
<button id="linha-essencial" type="button" onclick="Conteudo('container-linha-essencial')" class="on-button-essencial off-button-essencial"><h2>Linha <b>Essencial®</b></h2></button>
</form>
<form style="display: inline" method="get">
<button id="linha-pro" type="button" onclick="Conteudo('container-linha-pro')" class="on-button-pro off-button-pro"><h2>Linha <b>Pro®</b></h2></button>
</form>
<form style="display: inline" method="get">
<button id="linha-premium" type="button" onclick="Conteudo('container-linha-premium')" class="on-button-premium off-button-premium"><h2>Linha <b>Premium®</b></h2></button>
</form>
</div>
</section>
<div id="container-linha-essencial">...</div>
<div id="container-linha-pro">...</div>
<div id="container-linha-premium">...</div>
</div>
<div id="container-linha-essencial" style="dysplay: none">