473,549 Members | 2,716 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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(n ame1).style.dis play == "none")
document.all(na me1).style.disp lay = "inline"
else
document.all(na me1).style.disp lay = "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 1199
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.co m> 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(n ame1).style.dis play == "none")
document.all(na me1).style.disp lay = "inline"
else
document.all(na me1).style.disp lay = "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(n ame1).style.dis play == "none")
document.all(na me1).style.disp lay = "inline"
else
document.all(na me1).style.disp lay = "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.co m 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.co m> posted :
function hideShow (name1)
{
if (document.all(n ame1).style.dis play == "none")
document.all(na me1).style.disp lay = "inline"
else
document.all(na me1).style.disp lay = "none"
}

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

function hideShow (name1) { with (document.all(n ame1).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.c om/faq/> JL/RC: FAQ of news:comp.lang. javascript
<URL:http://www.merlyn.demo n.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 23 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
1409
by: news | last post by:
Is there a way to write an XML doc so that you can still format the text, bold and whatnot, and still have it display in a collapsable tree format? Here's what I'm using as a test: <?xml version="1.0" encoding="iso8859-1"?> <?xml-stylesheet type="text/css" href="xml-style.css"?> <result> <date>2005-05-19
7
1455
by: Rlrcstr | last post by:
How would one implement collapsable paragraphs of text in an HTML page? I want the sections of the document to be expandable for full text or collapsed into just the section heading. Any help is appreciated. Jerry
12
1290
by: Mark | last post by:
Hi I'm looking to create a colapsable list like what we see in a news reader or on a forum. - Basically, any number of levels up to 10 (i.e. more than whats likely to be needed) - Able to expand/collapse each branch independantly
1
2079
by: =?Utf-8?B?U2F2dm91bGlkaXMgSW9yZGFuaXM=?= | last post by:
Hi. I have a table that is a master table from which the user views ~300 rows at a time (rarely changing rows in a day). What I want to do is, when the user clicks on a row, to show related records from two tables, as 2 HTML tables side by side, (I believe inside a DIV panel) under this row clicked. If the user clicks the row again, the DIV...
0
7518
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7446
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7715
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
7808
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6040
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
0
3498
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
1935
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1057
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
757
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

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.