I have a table with some td that align vertically. When clicked, the td height increases, and if another td is clicked, the previous one resumes its original size. I also need the element to return to its original size when clicked again.
So far, I've only been able to change the height on the 1st click:
$('#tabela_funcoes td').click(function() {
$(this).animate({
height: '300px'
}, "slow" )
})
The click event is on the line (tr) and you can get all siblings of the clicked element to restore the height. It then increases the height of the clicked element. Bootply with the test: link
<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>
Javascript
$('#teste tbody tr').on('click', function() {
$(this)
.siblings()
.animate({
height: '50px'
});
$(this).animate({
height: '150px'
});
});