Make Div content appear only when I click a button

Question

Hello!

I’m having a hard time getting my Collapse content hidden when accessing the page.

I have 3 buttons with content, and as soon as I access the page on the server, the 3 contents appear at once.

I would like to not appear even one when starting the page and as it is clicking on the buttons appear the contents.

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>

Answer 1

So I believe you’ll get what you need

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

<section>
      <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" style="display: none">...</div>
<div id="container-linha-pro" style="display: none">...</div>
<div id="container-linha-premium" style="display: none">...</div>