Skip to main content
1 de 2

Substituir conteúdo Collapse

Olá!

Estou tendo dificuldades em fazer com que ao apertar o botão de collapse seja substituído o conteúdo.

Quando clico o conteúdo que já está ativado continua na página e o que eu ativei aparece ou em cima ou embaixo. A minha intenção é fazer a troca e não manter todas as informações juntas.

Clicou, ativou. Clicou em outro, substitui o conteúdo.

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:

      <form style="display: inline" method="get">
        <button id="btn-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="btn-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="btn-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>
... ... ...