Question

I’ve looked all over for an answer to this, and I can’t find any similar problem anywhere.

I’m trying to set up a reveal where you click an image and a text box appears below it. The image has a rollover change, also. I’ve set it up as straight javascript, and as jquery, and both times it works on all browsers except firefox! I’ve tried pretty much everything I can think of, but the “toggle” command just isn’t working.

The rollover change works fine in all browser, including firefox, so I don’t think it’s javascript in general. The script works perfectly in firefox outside of the facebook page.

Here’s a link to my test (click on “shop satisfied” for reveal):
http://www.facebook.com/pages/ToyOtter/184864048266693?sk=app_192059734207312

This is the script I’m using:

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="image2">';
    }
    else {
            ele.style.display = "block";
            imageEle.innerHTML = '<img src="image1">';
    }

}

and this is the html:

  <div id="headerDivImg"><a id="imageDivLink" href="javascript:toggle5('contentDivImg', 'imageDivLink');" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','http://www.toyotter.com/reveal/images/revealtest_03_ro.jpg',1)"><img src="http://www.toyotter.com/reveal/images/revealtest_03.jpg" name="Image5" width="501" height="28" border="0"></a></div> <div id="contentDivImg" style="display: none"><center><table width="350" border="0" align="center" cellpadding="10" cellspacing="2" bgcolor="#f1e3b8"><tr><td>Never go shopping for the holiday meal preparations on an empty stomach. It's too tempting! If you have a snack before picking up your groceries, you will be less impulsive and more likely to stay on a healthy track.</td></tr></table></center> </div>  

Answer 1

Try changing href="javascript:toggle5('contentDivImg', 'imageDivLink');" to href="#" onclick="toggle5('contentDivImg', 'imageDivLink');".