Javascript toggle issue

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.

Jan · Accepted Answer · 2011-02-07 19:30:32Z

2

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")

edited Feb 7, 2011 at 19:30

answered Feb 7, 2011 at 19:24

Jan

8,1803 gold badges41 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

stephmoreland Over a year ago

Thanks so much, that did the trick. I was pretty sure that it had something to do with "visible" not being set properly, but I didn't notice the "none" instead of "block".

Hogan · Accepted Answer · 2011-02-07 19:30:30Z

0

As Jan says... so try this:

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

Will plug into your existing code -- or you can take out the ! and switch your if statements around.

answered Feb 7, 2011 at 19:30

Hogan

70.7k10 gold badges83 silver badges119 bronze badges

Collectives™ on Stack Overflow

Javascript toggle issue

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related