Collapsible Tables [Archive] - WebDeveloper.com

jereece

07-15-2003, 07:24 PM

I have a web page which is an link index to some 200 documents. These documents are categorized in sections by subject. For example section 1.0 - General, 2.0 - Safety, 3.0 - Sampling, 4.0 - Testing, etc. etc.

The collumn headers in this index include "Work Practice Number" , "Document Title", "ERN No.", "Revision No."

Since we have so many documents, I wanted to make it easy for folks to get to the document they need to open, so I would like to have my index table initially collapsed to only show the headers. Then clicking on the header row will expand the list for that section.

I have seen this done before, but can't find it now that I need it. Any suggestions or examples on how to do this?

I appreciate your help.....

pyro

07-15-2003, 11:00 PM

Try something along these lines:

<script type="text/javascript">
function openTable(tableid) {
which = document.getElementById(tableid);
if (which.style.display == "block") {
which.style.display = "none";
}
else {
which.style.display = "block";
}
}
</script>

</head>

<body>
<a href="#" onclick="openTable('table1'); return false;">Table One</a>
<a href="#" onclick="openTable('table2'); return false;">Table Two</a>
<table id="table1" style="display: none; border: 1px solid;">
<tr>
<td>
Table One
</td>
</tr>
</table>
<table id="table2" style="display: none; border: 1px solid;">
<tr>
<td>
Table Two
</td>
</tr>
</table>