How to use CSS3 to resize table rows

Question

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, etc) as well.

Answer 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/