CODEWITHSUNDEEP
htmlcsscss-transitions
william44isme
william44isme

Reputation: 877

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

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:

<html>
<head>
<title>Test</title>
</head>
<body>
<table>
<tr>
<td>
<button type="button">Click Me!</button>
</td>
</tr>
<tr>
<td height="690" width="1280> <--- This cell needs it height to change to 400px when the button is clicked.
Cell 1
</td>
</tr>
</table>
</body>
</html>

Upvotes: 3

Views: 1336

Answers (3)

Kumar
Kumar

Reputation: 355

give id to button (clickbut) and for the table(tableheight) then use jquery

$(document).ready(function(){
  $("#clickbut").click(function(){
    $("#tableheight").css('height','somevalue eg:300px');
  });
});

Upvotes: 0

Konstantin Dinev
Konstantin Dinev

Reputation: 34905

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);
});

Upvotes: 4

Vlad
Vlad

Reputation: 795

You will need to use Javascript. Use function click() { document.getElementById('id').setProperty('style', 'height:100px;'); }

And for the button use this - <button onclick="click();">BUTTON</button>

Upvotes: 1

Related Questions