Hello,

I woould like to add 2 links to this code. One to "expand all" panels and the other to "callapse all". Also, when they expand and callapse all, the plus and minus images change accordingly. Can anyone please 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>
</head><body onLoad="initPanels();">

<span style="float:right; margin-bottom:3px; color:#999" class="sz10"><a href="javascript:void(0);" onClick="">Expand all</a>  |  <a href="javascript:void(0);" onClick="">Collapse all</a></span>


<!--Start Accordion-->
<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="http://javascript.cooldev.com/scripts/cooltree/demos/lines/img/e.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="http://javascript.cooldev.com/scripts/cooltree/demos/lines/img/e.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="http://javascript.cooldev.com/scripts/cooltree/demos/lines/img/e.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>
<script>
<!--

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

}

imgExpand   	= new Image();
imgCollapse 	= new Image();
imgExpand.src 	= "http://javascript.cooldev.com/scripts/cooltree/demos/lines/img/c.gif";
imgCollapse.src = "http://javascript.cooldev.com/scripts/cooltree/demos/lines/img/e.gif";

</script>
<script>


// Panel Functions
/////////////////////////////////////////////////////////////////////////////////////////////////////
function ChangeRowVisibility(tableName, strVisibility, intRowIndex)
{
	if(strVisibility == "visible")
	{
		document.getElementById(tableName).rows[intRowIndex].style.display = "block";
	}
	else if(strVisibility == "collapse")
	{
		document.getElementById(tableName).rows[intRowIndex].style.display = "none";
	}
}

function ToggleRowVisibility(tableName, intRowIndex)
{

	var currentSetting = document.getElementById(tableName).rows[intRowIndex].style.display;
	if (currentSetting=="none")
	{
		ChangeRowVisibility(tableName,"visible", intRowIndex);
		document.images[tableName+"."+intRowIndex].src=imgCollapse.src; 
	}
	else
	{
		ChangeRowVisibility(tableName,"collapse", intRowIndex);
		document.images[tableName+"."+intRowIndex].src=imgExpand.src; 
	}
}


</script>
</body>
</html>

The easiest way is to create a new function on you JS code, simple as

function exall() {
	for (inde=1;inde<=5;inde=inde+2) {
		ToggleRowVisibility("paneltable",inde);
	}
}
This article has been dead for over six months. Start a new discussion instead.