表行折叠/展开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 headers.

Should I change the border-collapse:collapse; property in the css ?

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 <span>+</span>

Demo: Fiddle