Adjustable windows in websites

edwardcasbon1 · 22 Aug 2006 at 08:14

Hi all,

For those of you that use windows live, you will understand what i am trying to explain/ask.

How do you create a box with a heading and content, that can minimize and maximize. You have like an area with a top heading, followed by content, but you can minimize it so only the header can be seen, then you can expand the box to see the content, understand?

How do you do that? I would love to implement that on my website, but am unsure how to go about doing it.

Cheers in advance,

Edward

edwardcasbon1 · 22 Aug 2006 at 08:47

Ive just been doing a google search, it looks like live.com uses ajax.

I'll have a go at what you said, but how would i toggle between the 2 classes?

edwardcasbon1 · 22 Aug 2006 at 14:48

Worked on it a bit more this afternoon, got it working as I want now, well at work i have.

Here is the code if anyone wants it,

CSS

Code:

.minimised
{
 width: 50px;
 height: 20px;
 overflow: hidden;
}
 
.maximised
{
 width: 50px;
}

HTML/Javascript:

Code:

<html>
<head>
<link rel="stylesheet" href="collapse.css"/>
<script language="javascript">
function toggle(id)
{
 var el;
 el=document.getElementById(id);
 if(el.className=="minimised")
 {
  el.className="maximised";
 }
 else
 {
  el.className="minimised";
 }
}
</script>
</head>
<body>
 
<div class="minimised" id="one"><a href="#" onclick="toggle('one')">One</a><br/>text text text text text text text text text text text</div>
<div class="minimised" id="two"><a href="#" onclick="toggle('two')">Two</a><br/>text text text text text text text text text text text</div>
 
</body>
</html>

Seems to work cushty for me, so just going to expand on it and integrate it into my website, www.edwardcasbon.com

Cheers for the help guys,

Edward

Adjustable windows in websites

edwardcasbon1

edwardcasbon1

edwardcasbon1

edwardcasbon1

edwardcasbon1

edwardcasbon1