Elements returning to the original size when clicked again or when a brother element is clicked



  • I have a table with some <td> that line up vertically. When clicked, the height of <td> increases, and if another is clicked <td>, the former returns to the original size. I also need the element to return to the original size when clicked again.

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

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


  • The click event is in line (<tr>) and you can catch all the siblings of the element clicked to restore height. Then it increases 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>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2