Collapse section

Profile · Posted 2006-06-26, 02:05 PM

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.

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.

Lenny · Posted 2006-06-27, 10:30 PM in reply to Lenny's post "Collapse section"

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.

WetWired

That I can do.

Thanks WW, you're a star.

Lenny

Lenny said:

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!

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)