Hi All,
I have this code with me (I got it from some website, do not remember now) which expand / collapse table rows. I want to add + / - image before it and switch it depending on if it is expanded or collapsed. Can someone help me extending this script. It is very simple, you can copy/paste following code in notpade and save as html file.
If someone has better solution then that will also work.
--------------------------
----------
----------
--
<html>
<head>
<meta http-equiv="Content-Langua
ge" content="en-us">
<title>Expand / Collapse</title>
<script>
var toggledDisplay = new Object();
toggledDisplay['sub1'] = true;
toggledDisplay['sub2'] = true;
toggledDisplay['sub3'] = true;
function toggleDisplay(bDisplayed)
{
if(!document.getElementByI
d || toggleDisplay.arguments.le
ngth < 2) return;
var displayed = new Object();
displayed['true'] = 'block';
displayed['false'] = 'none';
for(var i = 1; i < toggleDisplay.arguments.le
ngth; i++)
{
oDisplay = document.getElementById(to
ggleDispla
y.argument
s[i]);
if(oDisplay)
{
oDisplay.style.display = displayed[bDisplayed];
// mozilla is the only browser out of the lot that can't get this right. so, if we're
// setting an object's display style to block, we gotta reload any images contained
// within that block. mozilla won't do it for you like every other browser that
// supports the functionality of changing the display style dynamically.
// begin crap browser hack
if(bDisplayed)
{
oImages = oDisplay.getElementsByTagN
ame('IMG')
;
for(var j = 0; j < oImages.length; j++)
oImages[j].src = oImages[j].src;
}
// end mozilla, err, crap browser hack
if(typeof toggledDisplay[toggleDispl
ay.argumen
ts[i]] != 'undefined')
toggledDisplay[toggleDispl
ay.argumen
ts[i]] = !bDisplayed;
}
}
}
</script>
</HEAD>
<BODY>
<a href="JavaScript://" onclick="toggleDisplay(tru
e, 'sub1', 'sub2', 'sub3' , 'sub4', 'sub5', 'sub6', 'sub7');">Expand All</a> | <a href="JavaScript://" onclick="toggleDisplay(fal
se, 'sub1', 'sub2', 'sub3' , 'sub4', 'sub5', 'sub6', 'sub7');">Collapse All</a>
<font color="#000000">
<table border="1">
<tr>
<th>Fname</th>
<th>LName</th>
<th>Title</th>
</tr>
<tr>
<td colspan="3"><a href="JavaScript://" onclick="toggleDisplay(tog
gledDispla
y['sub1'],
'sub1')">Corporate Staff</a><td>
</tr>
<tr id="sub1">
<td colspan="3">
<table>
<tr>
<td>User 1</td>
<td>User 1</td>
<td>User 1</td>
</tr>
<tr>
<td>User 2</td>
<td>User 2</td>
<td>User 2</td>
</tr>
<tr>
<td>User 3</td>
<td>User 3</td>
<td>User 3</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3"><a href="JavaScript://" onclick="toggleDisplay(tog
gledDispla
y['sub2'],
'sub2')">Group one</a></td>
</tr>
<tr id="sub2">
<td colspan="3">
<table>
<tr>
<td>User 1</td>
<td>User 1</td>
<td>User 1</td>
</tr>
<tr>
<td>User 2</td>
<td>User 2</td>
<td>User 2</td>
</tr>
</td>
</table>
</tr>
<tr>
<td colspan="3"><a href="JavaScript://" onclick="toggleDisplay(tog
gledDispla
y['sub3'],
'sub3')">Group Two</a></td>
</tr>
<tr id="sub3">
<td colspan="3">
<table>
<tr>
<td>User 1</td>
<td>User 1</td>
<td>User 1</td>
</tr>
</table>
</td>
</tr>
</table>
</font>
<script language="JavaScript" type="text/javascript">
<!--
toggleDisplay(false, 'sub1', 'sub2', 'sub3', 'sub4', 'sub5', 'sub6', 'sub7');
toggleDisplay(true, 'toggleAll');
//-->
</script>
</BODY>
</HTML>
Start Free Trial
