PDA

View Full Version : Expand/Callapse All Help!



bigalo
04-10-2008, 06:50 PM
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>

jc_gmk
04-11-2008, 09:36 AM
This script users expand/contract

http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

Maybe you could use parts of it in your script?

bigalo
04-11-2008, 01:47 PM
Thanks, but I think this is a bit complex for me to leverage that code to work with mine. I am a novice.

Does anyone else have a solution?