JavaScript :
function toggle5(showHideDiv, switchImgTag) {
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchImgTag);
if(ele.style.display == “block”) {
ele.style.display = “none”;
imageEle.innerHTML = “” + ctrl.getAttribute(“entity”);
}
else {
ele.style.display = “block”;
imageEle.innerHTML = “” + ctrl.getAttribute(“entity”);
}
}

Thanks a lot for the javascript examples above.It helped me a lot.But one question i have been trying the same example using the Plus and minus images in different browsers.But the image doesn’t seem to be toggling.i have placed the code below

HTML Code :
<div id="”>
<a id="imageDivLink" entity="” href=”javascript:toggle5(”, ‘imageDivLink’);”><img src='/images/plus.gif’/>

JavaScript :
function toggle5(showHideDiv, switchImgTag) {
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchImgTag);
if(ele.style.display == “block”) {
ele.style.display = “none”;
imageEle.innerHTML = “<img src='/images/plus.gif’>” + ctrl.getAttribute(“entity”);

}
else {
ele.style.display = “block”;
imageEle.innerHTML = “<img src='/images/minus.gif’>” + ctrl.getAttribute(“entity”);

}
}

So if I am thinking this out correctly. The for loop will continuously run when you click on one of the toggles until all of the divs get met with one of the “if”, or “else” statements. And that would be 6 divs each time.

Does that make sense or do I need to rethink this?

Btw, I have to thank you for being such a great help!

newboxes is the set elements in an array that is returned by the .getElementsByClassName() function. The .length property will return the number of elements of an array so newboxes.length is simply the number of elements that is matched by class name.

I hope that answers your question.

Allen

In detail would be much appreciated.

Thanks!

onLoad="MM_preloadImages(Images/Rollover_03.png',Images/Rollover_05.png'...);

As you can see the Images/Rollover_03.png is missing the left single. This goes on for most of the arguments you have in that list

Allen

Allen

http://tinyurl.com/cw5jsks

If you want all your divs to not be displayed on the initial load, you can simply give them a class and the following in your CSS:

.yourClass {
    display: none;
}

Allen

The example of “only one div is displayed at any one time” was exactly what I was looking to build for a website I was designing. Thank you! I had a small tweek that I would love your input on, but I am unsure on how to edit what you already created. The edit would be when the page is first loaded the DIV#1, DIV#2, and DIV#3 are not displayed at all, only when clicking the specific toggle link would the DIV text display in the same fashion of one at a time.

Allen

Here is an example:

HTML code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<table>
   <tr>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader1" href="javascript:showonlyone('newboxes1');"  rel="nofollow">collapse</a>
         </div>
         <div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px;">Div #1</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader2" href="javascript:showonlyone('newboxes2');"  rel="nofollow">collapse</a>
         </div>
         <div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #2</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader3" href="javascript:showonlyone('newboxes3');"  rel="nofollow">collapse</a>
         </div>
         <div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #3</div>
      </td>
   </tr>
</table>

JavaScript code:

1
2
3
4
5
6
7
8
9
10
11

function showonlyone(thechosenone) {
    var newboxes = document.getElementsByClassName("newboxes");
        for(var x=0; x<newboxes.length; x++) {
            if (newboxes[x].id == thechosenone) {
                newboxes[x].style.display = 'block';
            }
            else {
                newboxes[x].style.display = 'none';
            }
      }
}

Here is a working example of the code:

http://jsfiddle.net/Fh7YA/7/

I have even edited the post with this code as it is actually a bit more efficient.

I hope this helps.

Allen

Russ

P.S. I agree about the JQuery route being simpler, but I’d like to get my head around this page’s examples first.

Yes, instead of using the “name” attribute, you can use the “class” attribute =) I would definitely combine this with the jQuery example though because it will be much simpler and elegant.

Allen

Allen

I can definitely take a look at your issue. Can you give me a link to the page with the problem?

Allen

long story short, I’m willing to pay $$ if this problem could be fixed.
please let me know if you’re interested …

thanks in advance.

Error Line 61, Column 30: element “q.length” undefined (this is another semicolon issue, I think).

for(var x=0; x<q.length; x++) {

and

Line 61, Column 21: start tag was here (it's looking at the "<" between x and q)

for(var x=0; x<q.length; x++) {

I’m doing w3c validation, and in line 4 below ( for(var x=0; x<Q.length; x++) { ) it says the semicolon isn't allowed.

I tried removing it, and of course the script no longer works. Is there something I can do to make this pass w3c validation?

Thanks again!

function question(clicked) {
var Q = document.getElementsByTagName(“div”);
for(var x=0; x<Q.length; x++) {
name = Q[x].getAttribute("name");
if (name == 'Q') {
if (Q[x].id == clicked) {
if (Q[x].style.display == 'block') {
Q[x].style.display = 'none';
}
else {
Q[x].style.display = 'block';
}
}else {
Q[x].style.display = 'none';
}
}
}
}