table rows collapse/expand css

Question

I am using the following example Demo provided by PSL in a post on a website.

I have a large table and I don\'t want all of the rows to show when page loads just the he

Answer 1

on dom ready you can hide the non header tr elements

$('.header').find('span').text('+')
$('table tr:not(.header)').hide()

Demo: Fiddle

Or using CSS

tr.header {
    cursor:pointer;
    display: table-row;
}
tr {
    display: none;
}

make sure that the default toggle is set to +

Demo: Fiddle