Vou ter várias divs, e pretendo ao clicar no button abrir a div desse botão e fechar a anterior. estou a fazer assim:
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>
Mas desta forma fica muito manual e ao abrir a segunda div mantém a primeira visivel e pretendo que ao abrir a segunda a primeira esconda.