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);
	}
}

Thanks HenryGR! This worked great!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.