Expand/collect table content by clicking on title

Asked

Viewed 2,468 times

2

I have a table, I want when loading the page to have its hidden content, and when clicking on the title (in the example below awaiting) then load the content, and again by clicking on the title the content is collected and is hidden.

How can I do?

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

php javascript html jquery

2 answers

4


You can use the method slideToggle(). At each click it switches to expand/collect 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>
<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>

If you want to change the cursor mouse over the element for the "little hand" (indicating that the element is clickable), you can use the CSS:

div.header{
   cursor: pointer;
}
  • 1

    You could put a mãozinha when placing the mouse on top of the aguardando to make it intuitive?

  • The one from mãozinha added :D

  • huahuahuah, put my little hand on +1

  • Ah... thanks for the hand

2

Suggestion made only with CSS 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>

Browser other questions tagged php javascript html jquery

You are not signed in. Login or sign up in order to post.