How To Implement Collapsible Table Rows In Javascript?

I'd like to have tables that can dynamically collapse some rows in a web page, such as: | Title | Foo | Bar | --------------------------------- | + My Firs

Solution 1:

Put each section in a different tbody element, each with an id attribute. Make the first row of each tbody a single header cell (th with the appropriate colspan) with your section header text and an anchor to #the_tbody_id. Then:

1. Add CSS:

   tbody[id]:not(:target) > tr:first-child + tr { display: none !important; }

2. Or, for non-partial-CSS3 browsers, add Javascript to hide the non-first rows in each of those tbodys (eg, loop through tablelement.getElementsByTagName("tbody")), and hook the anchor to toggle their display property on click (eg, loop through tbodyelement.getElementsByTagName("tr")).

Solution 2:

Dojo and Jquery both can do this for you, but in case you don't want to use a javascript library this isn't hard with just plain JavaScript. Use an onclick event handler for the +/- toggle, write a function that is executed which sets a block element (one of your sets of rows) to display:none (a css rule). If you're going to use a table to display this, don't try to dynamically hide or show table rows, it doesn't work well.

Solution 3:

You could set the display property of those rows as none, and reset it as "table-row" at click.

But I think that IE doesn't render this appropiately though...

Solution 4:

You just write a div with display none inside every TR. And on the '+' sign click change the display of the div to block and on '-' click change it again to none.

Assign each div a unique id.

Eg:

<tr><td>
       My Section>
       <divstyle='display:none'>
          Content goes here
       </div></td></tr>