Member Avatar for bigalo

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>
  • 2 Contributors
  • 2 Replies
  • 170 Views
  • 4 Months Discussion Span
  • Latest Post Latest Post by bigalo
Member Avatar for HenryGR

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);
	}
}
Member Avatar for bigalo

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.