When opening a div hide the div anteiror

Question

I will have several Ivs, and I intend to click the button to open the div of that button and close the previous one. I am doing so:

function mostraDiv(obj) {
    var el = document.getElementById('spoiler');
        if ( el.style.display == 'none' ) {
           /* se conteúdo está escondido, mostra e troca o valor do botão para: escondeOcultar */ 
           el.style.display = 'block';
           document.getElementById("consultar").value='Ocultar'
        } else {
           /* se conteúdo está a mostra, esconde o conteúdo e troca o valor do botão para: mostraConsultar */ 
           el.style.display = 'none' 
           document.getElementById("consultar").value='Consultar' 
        }
}
function mostraDiv1(obj) {
    var el = document.getElementById('spoiler1');
        if ( el.style.display == 'none' ) {
           /* se conteúdo está escondido, mostra e troca o valor do botão para: escondeOcultar */ 
           el.style.display = 'block';
           document.getElementById("consultar1").value='Ocultar'
        } else {
           /* se conteúdo está a mostra, esconde o conteúdo e troca o valor do botão para: mostraConsultar */ 
           el.style.display = 'none' 
           document.getElementById("consultar1").value='Consultar' 
        }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav1">
          <li><a type="button" class="button" id="consultar" onclick="mostraDiv('maisinfo')">Saída Luvas</a></li>
          <li><a type="button" class="button" id="consultar1" onclick="mostraDiv1('maisinfo')">Saída Produtos</a></li>
    </ul>
    
<div id="spoiler" style="display: none;">
<table class="table table-responsive" id="employee_table"> 
<h1 style="font-size: 30px"><strong>Saída de Luvas</strong></h1>
	<thead>  
<tr> 
<th>Colaborador</th>
<th>Tipo Luva</th>
<th>Tamanho</th>
<th>Quantidade</th>	
<th>Observação</th>	
<th>Data</th>	
<th>Estado</th>	
<th>Ação</th>	
<th>Eliminar</th>								
</tr> 
</thead>
<tbody>
</tbody>	  
</table>   
</div>

<div id="spoiler1" style="display: none;">
<table class="table table-responsive" id="employee_table1"> 
<h1 style="font-size: 30px"><strong>Saída de Produtos</strong></h1>
	<thead>  
<tr> 
<th>Colaborador</th>
<th>Produto</th>
<th>Outro Produto</th>
<th>Quantidade</th>	
<th>Observação</th>	
<th>Data</th>	
<th>Estado</th>	
<th>Ação</th>	
<th>Eliminar</th>								
</tr> 
</thead>
<tbody>
</tbody>	  
</table>   
</div>

But this way it gets very manual and when opening the second div keeps the first visible and I intend that when opening the second the first hide.

Answer 1

Use only one function for everyone by passing the id of the respective div in the function. Create two classes in your CSS, one to hide and one to show:

.esconde{
   display: none;
}

.mostra{
   display: block;
}

And put the class .esconde on Divs. So they will be hidden when opening the page. Now, using .classList.toggle("mostra") you will add/remove the class .mostra each time the element is clicked, showing or hiding the div with the id passed in the function:

function mostraDiv(obj) {
    var el = document.getElementById(obj);
    var visivel = document.getElementsByClassName("mostra")[0];
    if(visivel && visivel != el) visivel.classList.toggle("mostra");

    el.classList.toggle("mostra");
}

.esconde{
   display: none;
}

.mostra{
   display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav1">
          <li><a type="button" class="button" id="consultar" onclick="mostraDiv('spoiler')">Saída Luvas</a></li>
          <li><a type="button" class="button" id="consultar1" onclick="mostraDiv('spoiler1')">Saída Produtos</a></li>
    </ul>
    
<div id="spoiler" class="esconde">
<table class="table table-responsive" id="employee_table"> 
<h1 style="font-size: 30px"><strong>Saída de Luvas</strong></h1>
	<thead>  
<tr> 
<th>Colaborador</th>
<th>Tipo Luva</th>
<th>Tamanho</th>
<th>Quantidade</th>	
<th>Observação</th>	
<th>Data</th>	
<th>Estado</th>	
<th>Ação</th>	
<th>Eliminar</th>								
</tr> 
</thead>
<tbody>
</tbody>	  
</table>   
</div>

<div id="spoiler1" class="esconde">
<table class="table table-responsive" id="employee_table1"> 
<h1 style="font-size: 30px"><strong>Saída de Produtos</strong></h1>
	<thead>  
<tr> 
<th>Colaborador</th>
<th>Produto</th>
<th>Outro Produto</th>
<th>Quantidade</th>	
<th>Observação</th>	
<th>Data</th>	
<th>Estado</th>	
<th>Ação</th>	
<th>Eliminar</th>								
</tr> 
</thead>
<tbody>
</tbody>	  
</table>   
</div>

Answer 2

friend, try the following code, then you can make the adjustments to your case

function isAlterar() {
  document.getElementById("div1").style.display = 'none';
  document.getElementById("div2").style.display = 'block';
}

function isDetalhes() {
  document.getElementById("div1").style.display = 'block';
  document.getElementById("div2").style.display = 'none';
}

<div id="div1">
  <strong>div 1</strong>
   <button class="btn btn-info" onclick="isAlterar();">Alterar</button>
</div>

<div id="div2" style="display:none;">
  <strong>div 2</strong>
  <button class="btn btn-info" onclick="isDetalhes();">Cancelar</button>
</div>

Answer 3

You can make a accordion only with CSS using:

1. Radionbuttons
2. the CSS selector Adjacent Siblings
3. the pseudo CSS class :checked

Explanation

By definition a Radionbutton is part of a group and only one of them can be selected. Knowing this we can use them to ensure that only one of the contents is shown at a time.

When a <input type="radio"> is selected, your property checked is true.

The pseudo CSS class :checked matches any Checkbox, Radiobutton or Option (from a select) that is selected. Example:

input:checked {
    outline:2px solid green;
}

<label>
  Click me!
  <input type="radio" name="teste">
</label>

<label>
  Click me!
  <input type="radio" name="teste">
</label>

---

The CSS selector Adjacent Siblings marries the adjacent brother element, that is, the element that is the son of the same father and that comes soon after him. Maybe it’s easier to see it working:

/* Casa com todo `p` que vier logo depois de um `p.teste` */
p.teste + p {
  background-color: gold;
  border: 2px solid tomato;
}

<div>
  <p class="teste">Parágrafo 1</p>
  <p>Parágrafo 2 (irmão adjacente de .teste)</p>
  <p>Parágrafo 3</p>
  <p>Parágrafo 4</p>
  <p class="teste">Parágrafo 5</p>
  <p>Parágrafo 6 (irmão adjacente de .teste)</p>
  <p>Parágrafo 7</p>
</div>

---

By combining these concepts we can create a accordion putting a <input type="radio"> followed by an element that will be shown or hidden if input for :checked.

Upshot

/* Esconde o input e os conteúdos */
.accordion .accordion-content,
.accordion .accordion-item + input[type="radio"]
{
  display: none;
}

/* só mostra conteúdos com :checked em seu input */
.accordion input[type="radio"]:checked + .accordion-content {
  display: block;
}

<ul class="accordion">
  <li>
    <label class="accordion-item" for="accordion-item-1">Item 1</label>
    <input type="radio" name="meu_accordion" id="accordion-item-1">
    <div class="accordion-content">
      Texto 1
    </div>
  </li>
  <li>
    <label class="accordion-item" for="accordion-item-2">Item 2</label>
    <input type="radio" name="meu_accordion" id="accordion-item-2">
    <div class="accordion-content">
      Texto 2
    </div>
  </li>
  <li>
    <label class="accordion-item" for="accordion-item-3">Item 3</label>
    <input type="radio" name="meu_accordion" id="accordion-item-3">
    <div class="accordion-content">
      Texto 3
    </div>
  </li>
</ul>