Expand / collapse table contents by clicking title

Navigation
2

I have a table, I want to load the page with its hidden content, and when I click on the title (in the example below waiting ), load the content and click on the title again the content is collected and hidden.

How can I do this? 

  <div class="table-aguardo">
  <div class="header" style="background-color: green;">Aguardando</div>   
   <table cellspacing="0">
      <tr>
         <th>Leito</th>
         <th>Acomodação</th>
         <th>Tempo</th>
         <th>Tipo</th>
         <th width="230">Comentário</th>
      </tr>
      <tr>
         <td style=" font-size: 3em;">321</td>
         <td>Apartamento</td>
         <td>10:01</td>
         <td>Clínico</td>
         <td>TESTE</td>
      </tr>
      <tr>
         <td style=" font-size: 3em;">412</td>
         <td>Apartamento</td>
         <td>10:01</td>
         <td>Clínico</td>
         <td>TESTE</td>
      </tr>
      <tr>
         <td style=" font-size: 3em;">110</td>
         <td>Enfermaria</td>
         <td>10:01</td>
         <td>Cirurgico</td>
         <td>TESTE</td>
      </tr>      
      <tr>
         <td style=" font-size: 3em;">215</td>
         <td>Isolamento</td>
         <td>10:01</td>
         <td>Cirurgico</td>
         <td>TESTE</td>
      </tr>
   </table>
   </div>
    
asked by anonymous 28.03.2018 / 20:39

2 answers

5

You can use the slideToggle() method. With each click it toggles on expands / collects the element. But it is necessary that the table is initially hidden with display: none in the CSS: 

table{
   display: none;
}

jQuery: 

$("div.header").click(function(){
   $("table").slideToggle();
});

Example: 

$("div.header").click(function(){
   $("table").slideToggle();
});

// Se quiser ajustar a velocidade, pode usar um
// valor em milissegundos. Exemplo:
// $("table").slideToggle(500); // 500 milissegundos
// Significa que a animação vai durar meio segundo.
// Quanto maior o valor, mais lento;
// quanto menor, mais rápido.
// Sem especificar valor, o padrão é de 400.
table{
   display: none;
}

div.header{
   cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="header" style="background-color: green;">Aguardando</div>   
   <table cellspacing="0">
      <tr>
         <th>Leito</th>
         <th>Acomodação</th>
         <th>Tempo</th>
         <th>Tipo</th>
         <th width="230">Comentário</th>
      </tr>
      <tr>
         <td style=" font-size: 3em;">321</td>
         <td>Apartamento</td>
         <td>10:01</td>
         <td>Clínico</td>
         <td>TESTE</td>
      </tr>
      <tr>
         <td style=" font-size: 3em;">412</td>
         <td>Apartamento</td>
         <td>10:01</td>
         <td>Clínico</td>
         <td>TESTE</td>
      </tr>
      <tr>
         <td style=" font-size: 3em;">110</td>
         <td>Enfermaria</td>
         <td>10:01</td>
         <td>Cirurgico</td>
         <td>TESTE</td>
      </tr>      
      <tr>
         <td style=" font-size: 3em;">215</td>
         <td>Isolamento</td>
         <td>10:01</td>
         <td>Cirurgico</td>
         <td>TESTE</td>
      </tr>
   </table>
   </div>
  

If you want to change the cursor of the mouse over the element to the   "handy" (which indicates that the element is clickable), you can use the   CSS: 

div.header{
   cursor: pointer;
}
    
28.03.2018 / 20:45
2

Suggestion made with CSS only if you do not want to include jQuery. 

.table-aguardo label {
    width: 100%;
    display: inline-block;
    background-color: green;
    cursor: pointer;
}
.table-aguardo input[type="checkbox"] {
    display: none;
}
.table-aguardo input:checked + label {
    background-color: red;
}

.table-aguardo table {
    display: none;
}
.table-aguardo input:checked ~ table {
    display: table;
}
<div class="table-aguardo">
  <input id="aguardando" type="checkbox">
  <label for="aguardando" class="header">Aguardando</label>
   <table cellspacing="0">
      <tr>
         <th>Leito</th>
         <th>Acomodação</th>
         <th>Tempo</th>
         <th>Tipo</th>
         <th width="230">Comentário</th>
      </tr>
      <tr>
         <td style=" font-size: 3em;">321</td>
         <td>Apartamento</td>
         <td>10:01</td>
         <td>Clínico</td>
         <td>TESTE</td>
      </tr>
      <tr>
         <td style=" font-size: 3em;">412</td>
         <td>Apartamento</td>
         <td>10:01</td>
         <td>Clínico</td>
         <td>TESTE</td>
      </tr>
      <tr>
         <td style=" font-size: 3em;">110</td>
         <td>Enfermaria</td>
         <td>10:01</td>
         <td>Cirurgico</td>
         <td>TESTE</td>
      </tr>      
      <tr>
         <td style=" font-size: 3em;">215</td>
         <td>Isolamento</td>
         <td>10:01</td>
         <td>Cirurgico</td>
         <td>TESTE</td>
      </tr>
   </table>
</div>
<div class="table-aguardo">
  <input id="finalizado" type="checkbox">
  <label for="finalizado" class="header">Finalizado</label>
   <table cellspacing="0">
      <tr>
         <th>Leito</th>
         <th>Acomodação</th>
         <th>Tempo</th>
         <th>Tipo</th>
         <th width="230">Comentário</th>
      </tr>
      <tr>
         <td style=" font-size: 3em;">321</td>
         <td>Apartamento</td>
         <td>10:01</td>
         <td>Clínico</td>
         <td>TESTE</td>
      </tr>
      <tr>
         <td style=" font-size: 3em;">412</td>
         <td>Apartamento</td>
         <td>10:01</td>
         <td>Clínico</td>
         <td>TESTE</td>
      </tr>
      <tr>
         <td style=" font-size: 3em;">110</td>
         <td>Enfermaria</td>
         <td>10:01</td>
         <td>Cirurgico</td>
         <td>TESTE</td>
      </tr>      
      <tr>
         <td style=" font-size: 3em;">215</td>
         <td>Isolamento</td>
         <td>10:01</td>
         <td>Cirurgico</td>
         <td>TESTE</td>
      </tr>
   </table>
</div>
    
28.03.2018 / 21:10
Regex to validate a particular date format How to delete duplicate lines without using distinct?