1

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>

1 Resposta 1

1

O problema é que você está, simplesmente, pegando o conteúdo da div e verificando se ele está sendo exibido ou não. Para resolver o problema o correto seria fazer o seguinte:

function Conteudo(el) {
  const conteudoTexto = document.querySelector('#container-texto');
  for(const filho of conteudoTexto.children) {
    if (filho.id === el)
      filho.style.display = 'block';
    else
      filho.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-texto">
  <div id="container-linha-essencial" style="display: none">ESSENCIAL</div>
  <div id="container-linha-pro">PRO</div>
  <div id="container-linha-premium" style="display: none">PREMIUM</div>
</div>

Perceba que eu adicionei uma div em volta para envolver todos os conteúdos, assim podendo pegar apenas os filhos desejados dentro do container-texto, então, no evento de clique, eu pego todos os filhos e verifico se o elemento que estou dentro do container é o elemento referente ao botão que foi clicado, caso seja, ele fica visível, senão ele é escondido.

1
  • Obrigado Felipe. Obrigado pela solução, foi mais ou menos o que eu tinha pensado mas não consegui executar, preciso treinar o meu Js. Commented 7/11/2019 às 12:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .