Hide one div while the other is visible

Question

I wish that with this code I could start a hidden div that when I click on the button the hidden div was visible and the visible hidden with the same button.

I was using the following 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';
}

How can I control only a div that already starts in sample and when the hidden click is done, and with another return to the original state.

Answer 1

Your function needs to receive one more argument in order to show hide.

See below:

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>

This functionality in libraries such as jQuery is called toggle.

See below for an example using 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>

Answer 2

A simpler way is by using the event onclick. just capture the click on the button and change a CSS class that hides the element using the native Javascript method .classList.toggle().

Put a id different in each div and apply the class .hide on the div you want to hide initially. By clicking the button, this class will be toggled between the two Ivs, hiding the one that is visible and showing the one that is hidden and 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>