Elements that return to original size when clicked again or when a brother element is clicked

Question

I have a table with some <td> align vertically. When clicked, the height of the <td> increases, and if another is clicked <td>, the previous one back to its original size. I also need the element to return to its original size when clicked again.

So far, I’ve only managed to change the height in the first click:

$('#tabela_funcoes td').click(function() {
  $(this).animate({
    height: '300px'
  }, "slow" )
})

Answer 1

The click event is on the line (<tr>) and you can catch all siblings of the clicked element to restore height. Then increase the height of the clicked element. Bootply with the test: https://www.bootply.com/FAoXyzLzGd

$('#teste tbody tr').on('click', function() {
  $(this)
    .siblings()
    .animate({
      height: '50px'
    });

  $(this).animate({
    height: '150px'
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="teste" class="table table-responsive">
  <thead>
    <tr>
      <th>Coluna 1</th>
      <th>Coluna 2</th>
      <th>Coluna 3</th>
    </tr>
  </thead>
  <tbody>
    <tr style="height: 50px">
      <td>Valor 1</td>
      <td>Valor 2</td>
      <td>Valor 3</td>
    </tr>
    <tr style="height: 50px">
      <td>Valor 1</td>
      <td>Valor 2</td>
      <td>Valor 3</td>
    </tr>
    <tr style="height: 50px">
      <td>Valor 1</td>
      <td>Valor 2</td>
      <td>Valor 3</td>
    </tr>
    <tr style="height: 50px">
      <td>Valor 1</td>
      <td>Valor 2</td>
      <td>Valor 3</td>
    </tr>
    <tr style="height: 50px">
      <td>Valor 1</td>
      <td>Valor 2</td>
      <td>Valor 3</td>
    </tr>
  </tbody>
</table>