How To Use Css3 To Resize Table Rows

I have this jsfiddle that hides tables rows. I am trying to get it to expand the row to height=200 instead of hiding it. Feel free to suggest an easier method of doing it (html5,

Solution 1:

You can use jQuery toggle() with two functions as parameters. Documentation. It allows you to define two or more functions to cycle through on each mouse click.

$(document).ready(function()
{
//slide up and down when click over id #one
$("#one").toggle(
    function()
        {
        $(".togglebox").height(200);
        },
    function()
        {
        $(".togglebox").height(100);
        });
});

Working demo: http://jsfiddle.net/RNvP4/