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!

Code:
<!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>