Click to See Complete Forum and Search --> : Expanding/Collapsing Implementation in NS


PartMental
September 11th, 2002, 07:33 PM
I have a problem getting an Expanding/Collapsing Implementation to work with Netscape.

This is what I have now:

Several pages contain forms with a lot of data to enter. The forms are divided into fieldsets. Each fieldset has a heading with a plus sign (image) beside it. When you click the plus sign the fieldset expands, showing it's contents, and everything below it moves down, and the plus sign changes to a minus. When you click the minus sign, the fieldset collapses (hides) and everything below it moves up.

This is how I've done it:


<script language="javascript" type="text/javascript">
function ChangeCollapsing(Switch,SectionName)
{
Section=document.getElementById(SectionName);

if (Section.style.display=="none")
{
Section.style.display="";
Switch.src="minus.gif";
Switch.title="Collapse section";
}
else
{
Section.style.display="none";
Switch.src="plus.gif";
Switch.title="Expand section";
}
}
</script>

<div>
<img title="Expand section" src="plus.gif" onClick="ChangeCollapsing(this,'SectionOne');"> Section One
</div>
<div id="SectionOne" style="display:none;">
...
</div>

<div>
<img title="Expand section" src="plus.gif" onClick="ChangeCollapsing(this,'SectionTwo');"> Section Two
</div>
<div id="SectionTwo" style="display:none;">
...
</div>


How do I make it work with NS?

I know I have to get rid of the onClick and use href="javascript:ChangeCollapsing()" and add LAYERs.

The real problem here is because I rely on getElementById and style.display. What is the NS equivalent?

Thanks for any help you can give me. Have a great day.

Zvona
September 12th, 2002, 02:02 PM
This can't be done with NS4.x, because you have to divide fieldset into layers. When you divide them to layers, you have to have form tag inside a layer. If you have several fieldsets, you have to have several forms and this breaks the structure.

To expand/collapse layer in NS, html would look something like this:
<layer id="myLayer" visibility="show">

and JS would look like :
document.layers['myLayer'].document.visibility = "hide";
or
document.layers['myLayer'].document.visibility = "show";