0

Boa tarde! Tô tentando resolver um probleminha (creio eu ser simples).

Fiz um script para mostrar/ocultar as divs porém não estou conseguindo fazer com que quando eu aperte no botão 2, ele oculte a div do botão 1 (ou todas as outras caso tenha mais de 2 divs).

A idéia é sempre ficar mostrando apenas uma div na tela, independente de quantas tenham.

Exemplo:

    function mostrar(id) {
      if (document.getElementById(id).style.display == 'block') {
        document.getElementById(id).style.display = 'none';
      } else {
        document.getElementById(id).style.display = 'block'; 
      }        
    }
<!DOCTYPE html>
<html lang="en">
<head>

<!-- CSS -->
<style type="text/css">
        .hidden {
          display: none;
        }
</style>
</head>
<body>

<!-- Botão 1 -->
<a href="#" onClick="mostrar('exemplo1')">Botão 1</a>

<!-- Texto 1 -->
<div class="hidden" id="exemplo1">
  <h2> 1- texto que eu quero ocultar/mostrar</h2>
</div><br>

<br>

<!-- Botão 2 -->
<a href="#" onClick="mostrar('exemplo2')">Botão 2</a>

<!-- Texto 2 -->
<div class="hidden" id="exemplo2">
  <h2> 2- texto que eu quero ocultar/mostrar</h2>
</div>
</body>
</html>

3 Respostas 3

3

Você pode ocultar todos os elementos efetuando um loop pelo nome classe, após isso mostrar somente a div pelo id.

function mostrar(id) {
  if (document.getElementById(id).style.display !== "none") {
    document.getElementById(id).style.display = "none";
    return;
  }
  Array.from(document.getElementsByClassName("hidden")).forEach(
    div => (div.style.display = "none")
  );
  document.getElementById(id).style.display = "block";
}
.hidden {
  display: none;
}
<!-- Botão 1 -->
<a href="#" onClick="mostrar('exemplo1')">Botão 1</a>
<!-- Texto 1 -->
<div class="hidden" id="exemplo1">
  <h2> 1- texto que eu quero ocultar/mostrar</h2>
</div><br>
<br>
<!-- Botão 2 -->
<a href="#" onClick="mostrar('exemplo2')">Botão 2</a>
<!-- Texto 2 -->
<div class="hidden" id="exemplo2">
  <h2> 2- texto que eu quero ocultar/mostrar</h2>
</div>

3
  • esse código falha se clicar duas vezes no mesmo botão, uma exibe, depois não oculta 6/08/2019 às 21:01
  • Obrigado pela dica Wellington, em partes o problema foi resolvido, já me ajudou à mostrar sempre apenas uma div, porém como o Ricardo falou realmente ele não oculta se apertar no botão novamente, mesmo com esse outro código que você citou abaixo. Teria outra forma de corrigir isso? 7/08/2019 às 12:14
  • Alterei o código para ocultar. Abraços! 9/08/2019 às 14:05
1

Um jeito simples seria esconder todos os divs que deseja e depois tratar só o que foi clicado.

Tem várias maneiras de fazer isso, mas para deixar o código mais próximo do seu e ficar fácil de entender, esse exemplo faz o seguinte:

  • salva o display atual do elemento que passou o id;
  • esconde todos;
  • exibe/esconde o que foi passado o id:

function mostrar(id) {
    // salva o display atual, pois abaixo irá esconder todos os divs
    var display = document.getElementById(id).style.display;

    // pego todos os div. Esse é só um exemplo, seria melhor usar um seletor mais acertivo, senão todos os divs da pagina irão sumir
    var divs = document.querySelectorAll("div");
    // esconde cada div
    divs.forEach((div) => {
        div.style.display = 'none';
    });

    // aqui, a lógica que tinha feito
    if (display == 'block') {
        document.getElementById(id).style.display = 'none';
    } else {
        document.getElementById(id).style.display = 'block';
    }
}
.hidden {
   display: none;
 }
<!-- Botão 1 -->
<a href="#" onClick="mostrar('exemplo1')">Botão 1</a>

<!-- Texto 1 -->
<div class="hidden" id="exemplo1">
  <h2> 1- texto que eu quero ocultar/mostrar</h2>
</div><br>

<br>

<!-- Botão 2 -->
<a href="#" onClick="mostrar('exemplo2')">Botão 2</a>

<!-- Texto 2 -->
<div class="hidden" id="exemplo2">
  <h2> 2- texto que eu quero ocultar/mostrar</h2>
</div>

0

Mais ou menos assim

function toggleDiv() {
  if(document.getElementById("exemplo1").style.display == 'none') {
    document.getElementById("exemplo1").style.display = 'block';
    document.getElementById("exemplo2").style.display = 'none';
  } else {
    document.getElementById("exemplo1").style.display = 'none';
    document.getElementById("exemplo2").style.display = 'block';
  }
    
}
#exemplo1 {
width:100px;
height:100px;
background-color:#FF0000;
}

#exemplo2 {
width:100px;
height:100px;
background-color:#00FF00;
}
<div id="exemplo1" style="display:none"></div>
<div id="exemplo2"></div>

<button onclick="toggleDiv()">Sumir uma div e aparecer outra</button>

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 .