How to change the height of a HTML table when a link is clicked?

Question

Hi I would like to change the height of a HTML table from 690 to 400 in the 2 seconds in a smooth transition by clicking a button. Is there a way to do this in pure CSS? Here is my example: ``` Test

Accepted Answer

You cannot do that purely with `CSS`, however you can easily do it with `jQuery`:

```
// Use a more specific selector by ID or class
$('button').click(function (event) {
    $(this).closest('tr').next().children('td:first').animate({height: 400}, 2000);
});
```

How to change the height of a HTML table when a link is clicked?

Solution

Problem