Question

We have a bit of old code that’s in our website, and I can’t seem to find why it’s not working properly, so I’m wondering if fresh eyes can see what I can’t.
These are the functions:

    function Toggle(item) {
   obj=document.getElementById(item);
   visible=(obj.style.display!="none")
   key=document.getElementById("x" + item);
   if (visible) {
     key.innerHTML="<img src='/images/common/leftsidebullet_closed.gif' height=10 width=10 border=0>";
     obj.style.display="none";
   } else {
      key.innerHTML="<img src='/images/common/leftsidebullet_opened.gif' height=10 width=10 border=0>";
      obj.style.display="block";
   }
}

function Toggle2(item) {
   obj=document.getElementById(item);
   visible=(obj.style.display!="none")
   key=document.getElementById("x" + item);
   if (visible) {
     obj.style.display="none";
     key.innerHTML="<img src='/images/common/leftsidebullet_closedOrange.gif' height=10 width=10 border=0>";
   } else {
      obj.style.display="block";
      key.innerHTML="<img src='/images/common/leftsidebullet_openedOrange.gif' height=10 width=10 border=0>";
   }
}

And the example page is located here
If you click on the “Section 1 – Specifications” list item in the middle of the page, it requires two clicks to actually fire the toggle instead of it doing it the first time.
It’s not creating an error and I can’t think of anything else so I thought I’d ask if someone else can see something.

Answer 1

at page load the display property is set to '' (in Chrome). Which is different from 'none'. So visible is falsely set at true. So your script wants to hide the div by setting the display property at 'none'. The second time you click, the script evaluates visible to false. So it shows the div by setting the property to block.

Quick fix:

visible=(obj.style.display=="block")

in stead of

visible=(obj.style.display!="none")