1

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.

3 Respostas 3

1

Use apenas uma função para todos, passando o id da respectiva div na função. Crie duas classes no seu CSS, uma para esconder e outra para mostrar:

.esconde{
   display: none;
}

.mostra{
   display: block;
}

E coloque a class .esconde nas divs. Assim elas estarão escondidas ao abrir a página. Agora, usando .classList.toggle("mostra") você irá adicionar/remover a classe .mostra cada vez que o elemento for clicado, mostrando ou escondendo a div com o id passado na função:

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>

1

amigo, tente o seguinte codigo, dai vc pode fazer os ajustes para o seu caso

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>

1

Você consegue fazer um accordion apenas com CSS utilizando:

  1. RadionButtons
  2. o seletor CSS Adjacent Siblings
  3. a pseudo classe CSS :checked

Explicação

Por definição um RadionButton faz parte de um grupo e apenas um deles pode estar selecionado. Sabendo disso podemos utilizá-los para garantir que apenas um dos conteúdos seja mostrados por vez.

Quando um <input type="radio"> é selecionado, sua propriedade checked é true.

A pseudo classe CSS :checked casa com qualquer CheckBox, RadioButton ou Option (de um select) que esteja selecionado. Exemplo:

input:checked {
    outline:2px solid green;
}
<label>
  Click me!
  <input type="radio" name="teste">
</label>

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


O seletor CSS Adjacent Siblings casa com o elemento irmão adjacente, ou seja, o elemento que é filho do mesmo pai e que vem logo depois dele. Talvez seja mais fácil ver em funcionamento:

/* 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>


Combinando estes conceitos podemos criar um accordion colocando um <input type="radio"> seguido de um elemento que será mostrado ou escondido se input for :checked.

Resultado

/* 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>

Você deve fazer log-in para responder a esta pergunta.

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