PDA

View Full Version : Expand/Callapse Help!



bigalo
04-14-2008, 06:19 PM
Hello,

I have a script that I received some help on to expand and callapse the panels, however, when I expand or callapse all, the plus/minus icon does not change accordingly. Does anyone know how to fix this script so that the icons change on expand/callapse all?

Help!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<br>
<style>

#tables .tableMainSub {color: #517191; font-family: arial, helvetica, sans-serif; font-size: 11px; line-height: 18px; font-weight: normal; background: #D3DCEE; text-indent: 10px; vertical-align: middle; height: 20px; border: 1px solid #9FB9D6; cursor: hand; width:100%;}

#tables .tableCellLeft {vertical-align:top; border: #9FB9D6 solid 1px; color: #000000; font-family: arial, helvetica, sans-serif; font-size: 11px; font-weight: normal; padding:5px; }

</style>

<script type="text/javascript">
<!--

function initPanels()
{
// Pre-collapse some panels, as an example (assumes all panels initially visible)
ToggleRowVisibility("paneltable",1,true); // true=display='', false=display='none';
ToggleRowVisibility("paneltable",3,true);
ToggleRowVisibility("paneltable",5,false);

}

var imgExpand = new Image();
var imgCollapse = new Image();
imgExpand.src = "plus_blue.gif";
imgCollapse.src = "minus_blue.gif";


//-->
</script>
<script type="text/javascript">
<!--


// Panel Functions
/////////////////////////////////////////////////////////////////////////////////////////////////////

function ToggleRowVisibility(tableID, intRowIndex,display){
var table=document.getElementById(tableID);
var row=table.rows[intRowIndex];
if (!table.ary) table.ary=[];
if (!row.set){
row.set=true;
table.ary.push(row);
row.style.display=(display)?'none':'';
}
var currentSetting = row.style.display;
if (currentSetting!="none"){
row.style.display = "none";
document.images[tableID+"."+intRowIndex].src=imgExpand.src;
}
else {
row.style.display = "";
document.images[tableID+"."+intRowIndex].src=imgCollapse.src;
}
}

function All(tableName,vis){
var table=document.getElementById(tableName);
for (var zxc0=0;zxc0<table.ary.length;zxc0++){
table.ary[zxc0].style.display=vis;
}
}

//-->
</script>

</head><body onLoad="initPanels();">
<!--Start Accordion-->
<input type="button" name="" value="Expand" onClick="All('paneltable','');" >
<input type="button" name="" value="Callapse" onClick="All('paneltable','none');" >
<div id="tables">
<table id="paneltable" border="0" cellpadding="1" cellspacing="1" width="100%">
<tr valign="top">
<td class="tableMainSub" onClick="ToggleRowVisibility('paneltable',1);"><img src="minus_blue.gif" name="paneltable.1" border="0" >&nbsp;&nbsp;Header 1</td>
</tr>
<tr valign="top">
<td class="tableCellLeft"><!--Start Accordion Content-->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<!--End Accordion Content-->
</td>
</tr>
<tr valign="top">
<td class="tableMainSub" onClick="ToggleRowVisibility('paneltable',3);"><img src="minus_blue.gif" name="paneltable.3" border="0" >&nbsp;&nbsp;Header 2</td>
</tr>
<tr valign="top">
<td class="tableCellLeft"><!--Start Accordion Content-->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<!--End Accordion Content-->
</td>
</tr>
<tr valign="top">
<td class="tableMainSub" onClick="ToggleRowVisibility('paneltable',5);"><img src="minus_blue.gif" name="paneltable.5" border="0" >&nbsp;&nbsp;Header 3</td>
</tr>
<tr valign="top">
<td class="tableCellLeft"><!--Start Accordion Content-->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<!--End Accordion Content-->
</td>
</tr>
</table>
<!--End Accordion-->
</div>
</body>
</html>