Menu
Hello,
I woould like to add 2 links to this code. One to “expand all” panels and the other to “callapse all”. Can anyone please 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>
</head><body onLoad=”initPanels();”>
<!–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=”images/minus_blue.gif” name=”paneltable.1″ border=”0″ > 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=”images/minus_blue.gif” name=”paneltable.3″ border=”0″ > 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=”images/minus_blue.gif” name=”paneltable.5″ border=”0″ > 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 = “images/plus_blue.gif”;
imgCollapse.src = “images/minus_blue.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>