471,582 Members | 1,397 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,582 software developers and data experts.

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.
Jul 23 '05 #1
3 1132
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!
"J" <l5*@9klerer.com> wrote in message
news:ss***************@newsfe3-gui.ntli.net...
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.

Jul 23 '05 #2
On Thu, 13 Jan 2005 22:18:00 GMT J wrote:
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.
Jul 23 '05 #3
JRS: In article <ss***************@newsfe3-gui.ntli.net>, dated Thu, 13
Jan 2005 22:18:00, seen in news:comp.lang.javascript, J
<l5*@9klerer.com> posted :
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.

--
© John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.