Zelaron Gaming Forum - Collapse section

Zelaron Gaming Forum (http://zelaron.com/forum/index.php)

- Tech Help (http://zelaron.com/forum/forumdisplay.php?f=329)

- - Collapse section (http://zelaron.com/forum/showthread.php?t=39897)

Collapse section

Chancea are I'll work this one out before I get an answer, just like my rollover thingy, but it's always nice to get some help. :p

Another little thing for my site (completely new layout if you haven't seen it - www.lenny.x606x.com/ineffable), of course.

What I want is a little section that collapses when you click a button just above that section. In my next update I'm going to try mini feedback forms at the bottom of pages, as well as my main one on my contact page.

The thing I'm going for is a little claret bar, with an up- and down arrow to collapse and 'un-collapse' it.

Example: Top of the Zelaron page shows the members online. There is a little arrow to the right that, when clicked, makes the names disappear ('collapses' the section), and, when clicked again, makes them re-appear ('un-collapses' them).

What I'm wondering is what the HTML code for this is.

10 Brownie points to the person who gives me the correct answer first. :p

Code:

<xhtml>

<head>

<title>Collapse test</title>

<script type="text/javascript">

function ToggleCollapse(sectionid,iconid){

  var theSection=document.getElementById(sectionid);

  var theIcon=document.getElementById(iconid);

  if(theSection.style.display=="block"){

    theSection.style.display="none";

    theIcon.src="opensection.gif";

  }else{

    theSection.style.display="block";

    theIcon.src="closesection.gif";

  }

}

</script>

</head>

<body style="color:black;background-color:white;">

<table style="background-color:black;" cellspacing="1">

<tr><th style="background-color:gray;"><a href="#" style="float:right;" onclick="ToggleCollapse('section1','icon1');return false;"><img src="opensection.gif" border="0" id="icon1" /></a>A title goes here</th></tr>

<tbody id="section1" style="display:none;">

<tr><td style="background-color:gray;">This can be hidden</td></tr>

<tr><td style="background-color:gray;">And span several rows</td></tr>

</tbody>

</table>

</body>

</xhtml>

You'll need to supply your own opensection.gif and closesection.gif.

That I can do.

Thanks WW, you're a star. :)

Quote:

Originally Posted by Lenny

That I can do.

Thanks WW, you're a star. :)

A real regular superstar.

But yea, I was wondering how to do this as well so taht is very helpfull.

Way to be there WW!