Toggel Display

[mpoer]

I found this javascript that seems to almost do what I want (below). I haven't altered it yet, because it looks like it should work when I mess with the CSS for this. Basically, I want when you click the link for it to show the info, and click again to make it dissapear. I want it to start out hidden, though, hence the css at the bottom of the following code.

<script type="text/javascript"><!--// toggle visibilityfunction toggle( targetId ){  if (document.getElementById){        target = document.getElementById( targetId );           if (target.style.display == "none"){              target.style.display = "";           } else {              target.style.display = "none";           }     }}--></script><style type="text/css">#item01 {display:none;}</style>

The page is here: http://thinktank.ichyware.net:81/~matthew/herd/services.phpthe darn thing works without the CSS, but since I want it to start out hidden, that's the only way I can think to do it. What am I doing wrong?Also, I would like a way to show all the hidden texts from one link, and for non javascript browsers to show the texts by default.

[Pollux]

The style you have is overriding the style property you are dynamically setting, but you can just put style="display:none" as an attribute for each item and that should work. Or, alternatively you can set the style by a function called onLoad of the body. If you do this, you could keep an array of all the ids which need their style changing. It will then be very simple to write two functions, e.g. collapseAll() and expandAll(). Which just run through all the elements of the array and change the display style to 'none' and 'block' respectively.Call collapseAll() onLoad and expandAll() from your hyperlink.

[mpoer]

thanks a lot, Pollux. I'll give that a shot on the morning and let you know how it works