Hide a div and show another

Asked

Viewed 1,262 times

0

Good afternoon! I am trying to solve a little problem (I believe to be simple).

I made a script to show/hide the Ivs, but I can’t make it so that when I press button 2, it hides the div from button 1 (or all the others if it has more than 2 Ivs).

The idea is always to show only one div on the screen, regardless of how many have.

Example:

    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>

php javascript div button

3 answers

2


You can hide all elements by looping by class name, after which only div by 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>

  • this code fails if you double-click the same button, one displays, then does not hide

  • Thanks for the tip Wellington, in parts the problem was solved, already helped me to always show only one div, but as Ricardo really said he did not hide if you push the button again, even with this other code you quoted below. I’d have another way to fix that?

  • I changed the code to hide it. Hugs!

0

Sort of like this

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>

0

A simple way would be to hide all the Ivs you want and then treat only what was clicked.

There are several ways to do this, but to bring the code closer to yours and make it easy to understand, this example does the following:

  • saves the current display of the element that passed id;
  • hides all;
  • shows/hides what was passed to 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>

Browser other questions tagged php javascript div button

You are not signed in. Login or sign up in order to post.