Clever Geek Handbook

How do I change the height of an HTML table when a link is clicked?

Hey. I would like to change the height of an HTML table from 690 to 400 in 2 seconds on a smooth transition by clicking a button. Is there a way to do this in pure CSS? Here's 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>
+3


source to share


3 answers


You cannot do it with just 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);
});
+4


source


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



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

+1


source


enter id for button (clickbut) and table (tableheight) then use jquery

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


source






More articles:


All Articles