Javascript problem with visible DIVs

[Wildcatbob]

I can't figure out how to fix this.

The idea:
In a column on the left, there are some image thumbnails. When you click an image, a larger image is loaded into a 'placeholder' image.
At the same time, a related DIV is made visible. At this point, it works.

The problem:
...but the DIVs that are made visible stay visible if you click on another thumbnail - I would like it to replace the current visible DIV. I end up with a whole load of DIVs visible, instead of just the one. Can anyone please help?

Javascript code is:
function showPic (whichpic, divName) {
divStyle = document.getElementById(divName).style;
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
divStyle.display='block';
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
divStyle.display='none';
}
return false;
} else {
return true;
}
}

This is the link code for the thumbnails, say, 2 of them:
<a onclick="return showPic(this, 'image1')" href="images/image1.jpg" title="Some title text." target="_self"><img src="images/image1b.jpg" alt="Some alt text." width="65" height="65" border="0" /></a>
<a onclick="return showPic(this, 'image2')" href="images/image2.jpg" title="Some title text." target="_self"><img src="images/image2b.jpg" alt="Some alt text." width="65" height="65" border="0" /></a>

<div id="image1" style="display:none;">1</div>
<div id="image2" style="display:none;">2</div>

Thanks.

[Sync]

It would be great if you can give us the code in details..eg: desc
maybe.. attach ur code in ur thread.

[JPnyc]

just give those divs a class instead of IDs, then create a divObj=document.getElementsByTagName('div');
for(var i=0;i<divObj.length;i++)
if(divObj.className=="myHiddenDivs")
divObj[i].style.display='none';

Now put that before the statement that makes the div you want show. You'll be hiding all of them, then making just one show afterward.

[Wildcatbob]

Thanks - I inserted the code in various places within the showpic function, but it still shows all the DIVs, eventually.

Sorry to be a pain, but perhaps you can point out where I've gone wrong?

function showPic (whichpic, divName) {
divStyle = document.getElementById(divName).style;

if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
divObj=document.getElementsByTagName(divName);
for(var i=0;i<divObj.length;i++)
if(divObj.className=="myHiddenDivs")
divObj[i].style.display='none';
divStyle.display='block';
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
divStyle.display='none';
}
return false;
} else {
return true;
}
}

The DIVs have been added a class name:
<div class="myHiddenDivs" id="image1" style="display:none;">1</div>
<div class="myHiddenDivs" id="image2" style="display:none;">2</div>

Many thanks, I appreciate the help.

[JPnyc]

Well personally I would not have written it this way, but I'll try to see if I can patch it.

[Wildcatbob]

No worries, feel free to suggest alternative code if you prefer.

[JPnyc]

Is this a script you found? or did you write it? The reason I ask is because I want to suggest a different approach, but I don't have time to actually write the function for you, and I also can't see the whole page and know just how you want it to work.

So if you didn't find that script and have some scripting experience yourself, you could probably write it with a little guidance.

[Wildcatbob]

Most of it is from a script I found, and I simply added to it. I pretty much understand the code, and have done some javascript coding (limited mostly to form validation) but I can't seem to crack this one at the moment.

In so far as how the page looks, it doesn't really matter - so long as there are some thumbnails, a larger image area and a (html formatted) text area to suit.

Ta.

[JPnyc]

Please attach the whole document, I'll see what the best approach is.

[Wildcatbob]

Sure, zip file attached, and thanks - but if it's a problem pls don't spend too much time on it!

[JPnyc]

Ok, I have an approach now. Put the image tags an the descriptive text into the same div. 1 div for both image and text, for each set. Then in the function call of each, pass a number for the image/text set you want to show:
function showHide(x) {
var divObj=document.getElementsByTagName('div');
for(var i=0;i<divObj.length;i++) {
if(divObj[i].className=="myHiddenDivs")
divObj[i].style.display='none';
}
divObj[x].style.display='block';
}

So the function call will be onclick="showHide(0)" that will show the 1st div containing the 1st img/text pair, 1 will show the 2nd, 2 the 3rd, and so on.

[Wildcatbob]

Many thanks for your excellent help - I've been off for 3 days, so I've got some catching up to do work wise - I'll post results here in due course.

[JPnyc]

I had to modify it. Dunno what I was thinking but 'div' was missing so it's corrected now

[Wildcatbob]

Thanks