collapsable side bar (IE)

[J]

Hello,

I'd like to create sections that are collapsible via clicking on a
graphic next to (or above) the section (e.g. collapsible cells of a table)

I've given both the graphic and the section an ID property and I have
written this:

function hideShow (name1)
{
if (document.all(name1).style.display == "none")
document.all(name1).style.display = "inline"
else
document.all(name1).style.display = "none"
}

which seems to work, but how can I pass in the image ID and have the
image swapped each time I collapse/expand the section?

any help appreciated,
BK.

 

[FunGuySF]

The simple answer is, provide a name in the image tag, then:

document.images[imagename].src = "img/image1.jpg";

However, when creating an image swap, you should consider precashing the
images, so the user doesn't get bogged down with a delay (ugly visual
stuff).

To name the image tag:

<img id="image1" border="0" src="img/image1.jpg" />

To precash the images:

var cachedImg = new Object( );
cachedImg['image1'] = new Image();
cachedImg['image1'].src = "img/image2.jpg";

then, when you do the swap:

document.images['image1'].src = cachedImg['image1'].src

That'll do the trick!

 

[Richard]

Hello,

I'd like to create sections that are collapsible via clicking on a
graphic next to (or above) the section (e.g. collapsible cells of a
table)

I've given both the graphic and the section an ID property and I have
written this:

function hideShow (name1)
{
if (document.all(name1).style.display == "none")
document.all(name1).style.display = "inline"
else
document.all(name1).style.display = "none"
}

which seems to work, but how can I pass in the image ID and have the
image swapped each time I collapse/expand the section?

any help appreciated,
BK.

DYnamicdrive.com has a menu called "switch menu" which does what you want.
You can see it in action at my site www.somestuff.batcave.net/
You're close though.
Take a look at their source code to see what they did.

 

[Dr John Stockton]

JRS: In article <[email protected]>, dated Thu, 13
Jan 2005 22:18:00, seen in J

function hideShow (name1)
{
if (document.all(name1).style.display == "none")
document.all(name1).style.display = "inline"
else
document.all(name1).style.display = "none"
}

function hideShow (name1) { var T = document.all(name1).style
T.display = (T.display == "none") ? "inline" : "none" }

function hideShow (name1) { with (document.all(name1).style)
display = (display == "none") ? "inline" : "none" }

should be more economical equivalents.