Collapsible Table questions

tcadieux

02-12-2007, 08:34 PM

Using the below code, which does work, I was wondering if anyone knew of another such script that was more visually pleasing?

<SCRIPT LANGUAGE="JavaScript">
// Row Hide function.
function expandcontract(tbodyid,ClickIcon) {
if (document.getElementById(ClickIcon).innerHTML == "+"){
document.getElementById(tbodyid).style.display = "";
document.getElementById(ClickIcon).innerHTML = "-";
} else {
document.getElementById(tbodyid).style.display = "none";
document.getElementById(ClickIcon).innerHTML = "+";
}}
</SCRIPT>

<table width='100%' border='0' cellpadding='2' cellspacing='0' >
<tr>
<td width='2%' onclick="expandcontract('Row1','ClickIcon1')" id="ClickIcon1" style="cursor: pointer; cursor: hand;" colspan="6">
+</td><td width='98%'>Comments by:  tim</td>
</tr>
<tbody id='Row1' style='display:none'>
<tr><td colspan='2'>ddddd ggg
</td></tr></table>
<table width='100%' border='0' cellpadding='2' cellspacing='0' >
<tr>
<td width='2%' onclick="expandcontract('Row2','ClickIcon2')" id="ClickIcon2" style="cursor: pointer; cursor: hand;" colspan="6">
+</td><td width='98%'>Comments by:  fff</td>
</tr>
<tbody id='Row2' style='display:none'>
<tr><td colspan='2'>fff f f
</td></tr></table>
<table width='100%' border='0' cellpadding='2' cellspacing='0' >
<tr>
<td width='2%' onclick="expandcontract('Row3','ClickIcon3')" id="ClickIcon3" style="cursor: pointer; cursor: hand;" colspan="6">
+</td><td width='98%'>Comments by:  fff</td>
</tr>
<tbody id='Row3' style='display:none'>
<tr><td colspan='2'>fff f f
</td></tr></table>

Arbitrator

02-13-2007, 07:09 AM

That’s some ugly code alright: it contains invalid and non‐standard code, lacks indentation, contains inline CSS, and has gibberish for content. Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-US">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>CF 107302</title>



<style type="text/css">
* { margin: 0; padding: 0; }
html { padding: 1em; }
ul { list-style-type: none; }
ul li span { cursor: pointer; }
ul li span span { font-family: monospace; }
ul ul { display: none; list-style: inside circle; padding-left: 1.2em; }
ul ul.expanded { display: block; }
</style>

<script type="text/javascript">
function view(object) {
if (!object.parentNode.getElementsByTagName("ul")[0].className) {
object.parentNode.getElementsByTagName("ul")[0].className = "expanded";
object.firstChild.firstChild.data = "–";
}
else {
object.parentNode.getElementsByTagName("ul")[0].className = "";
object.firstChild.firstChild.data = "+";
}
}
</script>

</head>
<body>

<ul>
<li><span onclick="view(this);"><span>+</span> Topic</span>
<ul>
<li>Sub‐Topic</li>
<li>Sub‐Topic</li>
<li>Sub‐Topic</li>
</ul>
</li>
</ul>
<ul>
<li><span onclick="view(this);"><span>+</span> Topic</span>
<ul>
<li>Sub‐Topic</li>
<li>Sub‐Topic</li>
<li>Sub‐Topic</li>
</ul>
</li>
</ul>
<ul>
<li><span onclick="view(this);"><span>+</span> Topic</span>
<ul>
<li>Sub‐Topic</li>
<li>Sub‐Topic</li>
<li>Sub‐Topic</li>
</ul>
</li>
</ul>

</body>
</html>

tcadieux

02-13-2007, 01:14 PM

Very clean code, thanx for sharing.