Skip to main content
2 de 2
adicionou 53 caracteres ao conteúdo
LeAndrade
  • 9mil
  • 11
  • 29
  • 52

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.

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 class="linhas-esquadros-container" id="navbar">
  <div class="linhas-esquadros" id="linhas-esquadros">

    <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>

<div id="container-linha-essencial" style="display: none">...</div>
<div id="container-linha-pro">...</div>
<div id="container-linha-premium" style="display: none">...</div>