So far, so good.
I will suggest that you change it, so the toggling is based on the button clicked instead of the state of the button.
inside toggle5 you have you are actually testing, if the button clicked, is visible or not, by:
if(ele.style.display == "block") {
As the button cannot be clicked if it is not visible ...
First: let's assign some id's to the elements that change:
the images inside the links, and the divs containing the big images.
And we wanna use a structure so all related elements have a unique common: the number contained in their id.
Code:
<a><img id="toggleImage0" /></a>
<a><img id="toggleImage1" /></a>
<div id="contentDiv0">bigimage</div>
<div id="contentDiv1">bigimage</div>
notice the " /" at the end of the image tag.
we are here dealing with XHTML, which requires ALL tags to be closed.
<img> have no end tag: </img> so instead we close it by adding " /" at the end of the tag.
As we have assigned unique numbers for all of the set, all we have to pass to the function, is the number
Code:
<a href="javascript:toggle5(0)"><img id="toggleImage0" /></a>
we also need a way for the function to count the sets.
this can done by assign a classname to 1 of the elements in each set.
assigning it to the link it would be.
Code:
<a class="toggles" href="javascript:toggle5(0)"><img id="toggleImage0" /></a>
<a class="toggles" href="javascript:toggle5(1)"><img id="toggleImage1" /></a>
we need one more thing:
to set a source for the images. And to hide the div's containing the big images
Code:
<a class="toggles" href="javascript:toggle5(0)"><img id="toggleImage0" src="images/plus.png" /></a>
<a class="toggles" href="javascript:toggle5(1)"><img id="toggleImage1" src="images/plus.png" /></a>
<div id="contentDiv0" style="display:none"><img src="bigImage0.ext" /></div>
<div id="contentDiv1" style="display:none"><img src="bigImage1.ext" /></div>
Now we are fininshed with the HTML part.
in the function we need to
count the images and to
run a loop through them and
assign a variable for the passed value:
Code:
function toggle(Imagenum){
Sets = document.getElementsByClassName('toggles');
NumberOfSets = Sets.length;
for (x = 0 ; x < NumberOfSets ; x++){
....
}
}
in the loop we need to test
x against
Imagenum
Code:
function toggle(Imagenum){
Sets = document.getElementsByClassName('toggles');
NumberOfSets = Sets.length;
for (x = 0 ; x < NumberOfSets ; x++){
if (x == Imagenum){
...
}else{
...
}
}
}
if matching, we want:
Code:
document.getElementById('toggleImage' + x).src = 'images/minus.png';
document.getElementById('contentDiv' + x).style.display = 'block';
and if not, we want:
Code:
document.getElementById('toggleImage' + x).src = 'images/plus.png';
document.getElementById('contentDiv' + x).style.display = 'none';
these condition we add to the loop:
Code:
function toggle5(Imagenum){
Sets = document.getElementsByClassName('toggles');
NumberOfSets = Sets.length;
for (x = 0 ; x < NumberOfSets ; x++){
if (x == Imagenum){
document.getElementById('toggleImage' + x).src = 'images/minus.png';
document.getElementById('contentDiv' + x).style.display = 'block';
}else{
document.getElementById('toggleImage' + x).src = 'images/plus.png';
document.getElementById('contentDiv' + x).style.display = 'none';
}
}
}
And Last we have to put it all into the the document:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test Document</title>
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
function toggle5(Imagenum){
Sets = document.getElementsByClassName('toggles');
NumberOfSets = Sets.length;
for (x = 0 ; x < NumberOfSets ; x++){
if (x == Imagenum){
document.getElementById('toggleImage' + x).src = 'images/minus.png';
document.getElementById('contentDiv' + x).style.display = 'block';
}else{
document.getElementById('toggleImage' + x).src = 'images/plus.png';
document.getElementById('contentDiv' + x).style.display = 'none';
}
}
}
</script>
</head>
<body>
<div id="headerDivImg">
<div id="titleTextImg">display div test</div>
<a class="toggles" href="javascript:toggle5(0)"><img id="toggleImage0" src="images/plus.png" /></a>
<a class="toggles" href="javascript:toggle5(1)"><img id="toggleImage1" src="images/plus.png" /></a>
</div>
<div id="contentDiv0" style="display:none"><img src="bigImage0.ext" /></div>
<div id="contentDiv1" style="display:none"><img src="bigImage1.ext" /></div>
</body>
</html>
If you want to add more images:
Code:
<div id="headerDivImg">
<div id="titleTextImg">display div test</div>
<a class="toggles" href="javascript:toggle5(0)"><img id="toggleImage0" src="images/plus.png" /></a>
<a class="toggles" href="javascript:toggle5(1)"><img id="toggleImage1" src="images/plus.png" /></a>
<a class="toggles" href="javascript:toggle5(2)"><img id="toggleImage2" src="images/plus.png" /></a>
<a class="toggles" href="javascript:toggle5(3)"><img id="toggleImage3" src="images/plus.png" /></a>
</div>
<div id="contentDiv0" style="display:none"><img src="bigImage0.ext" /></div>
<div id="contentDiv1" style="display:none"><img src="bigImage1.ext" /></div>
<div id="contentDiv2" style="display:none"><img scr="bigImage2.ext" /></div>
<div id="contentDiv3" style="display:none"><img src="bigImage3.ext" /></div>
Before you post, read our: 
