1

Gostaria que com este código eu conseguisse iniciar uma div oculta que quando eu desse um click no botão a div oculta ficasse visível e a que estava visível oculta com o mesmo botão.

Estava usando o seguinte script:

function Mudarestado(el) {
    var display = document.getElementById(el).style.display;
    if(display == "none")
        document.getElementById(el).style.display = 'block';
    else
        document.getElementById(el).style.display = 'none';
}

Como consigo controlar apenas uma div que já inicia em amostra e quando se faz o clique oculta, e com mais um volta ao estado original.

2
  • E não seria só fazer a mesma coisa com a outra div, mas invertendo o valor de display?
    – Woss
    Commented 7/06/2019 às 16:43
  • Amigo poderia da um exemplo ? Commented 7/06/2019 às 16:47

2 Respostas 2

1

Uma forma mais simples é usando o evento onclick. basta capturar o clique no botão e alterar uma classe CSS que oculta o elemento usando o método nativo JavaScript .classList.toggle().

Coloque um id diferente em cada div e aplique a classe .hide na div que quer esconder inicialmente. Ao clicar no botão, essa classe será alternada entre as duas divs, escondendo a que está visível e mostrando a que está oculta e vice-versa:

document.querySelector(".botao").onclick = function(){
   
   var divoculta = document.querySelector(".hide"); // paga a div oculta
   // esconde a div visível adicionando a classe .hide
   document.getElementById(divoculta.id == "div2" ? "div1" : "div2").classList.toggle("hide");
   divoculta.classList.toggle("hide"); // mostra a div oculta removendo a classe .hide
   
}
#div1, #div2{ /*cor de fundo apenas para exemplo*/
   background: red;
}

.hide{
   display: none;
}
<div id="div1">div1</div>
<div id="div2" class="hide">div2</div>
<button class="botao" type="button">Ocultar/Mostrar</button>

1

Sua função precisa receber mais um argumento para poder exibir ocultar.

Veja abaixo:

function Mudarestado(el1, el2) {
    var ele1 = document.getElementById(el1);
    var ele2 = document.getElementById(el2);
    
    if(ele1.style.display == "none") {
        ele1.style.display = "block";
        ele2.style.display = "none";
    } else {
        ele1.style.display = "none";
        ele2.style.display = "block";
    }
}
div {width: 100px; height: 100px;}

#item1 {background:red}
#item2 {background:green}
<div id="item1">div1</div>
<div id="item2" style="display:none;">div2</div>
<br />
<button onclick="Mudarestado('item1', 'item2')">Mudar Estado</button>

Essa funcionalidade em bibliotecas como jQuery é chamada de toggle.

Veja abaixo um exemplo utilizando jQuery:

jQuery(document).ready(function ($) {
  $('#btnMudarEstado').on('click', function () {
    $('.item').toggle();
  });
});
div {width: 100px; height: 100px;}

#item1 {background:red}
#item2 {background:green}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="item1" class="item">div1</div>
<div id="item2" class="item" style="display:none;">div2</div>
<br />
<button id="btnMudarEstado">Mudar Estado</button>

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