The two buttons work for me, meaning, the text below changes when I click them.

Sometimes during development older file versions can become "stuck" in the cache and not get updated when changed repeatedly in a short period of time. Try clearing Firefox's cache first to make sure you aren't experiencing that problem. See: How to clear the Firefox cache.

If that doesn't help, are you sure you don't have any extensions that might affect the script in the page? You could you test in Firefox's Safe Mode: That's a standard diagnostic tool to deactivate extensions and some advanced features of Firefox. More info: Diagnose Firefox issues using Troubleshoot Mode.

If Firefox is not running: Hold down the option key when starting Firefox.

If Firefox is running: You can restart Firefox in Safe Mode using either:

• "3-bar" menu button > "?" button > Restart with Add-ons Disabled
• Help menu > Restart with Add-ons Disabled

and OK the restart.

Both scenarios: A small dialog should appear. Click "Start in Safe Mode" (not Refresh).

Any improvement?

Hi jscher2000,

Thanks so much for your quick reply. I tried both suggestions, however, it's still not functioning correctly.

More info: When I click on "give monthly" the text changes for me as well, however, a new checkout form should also load below that replaces the form for "give once."

You can see how it's supposed to work if you go to the page in chrome or safari.

I think it's the way that Firefox is interpreting the code. Another strange thing is that if you click on "give monthly" while the page is loading (before the 'give once' form has loaded) then the "give monthly" form shows up correctly but the "give once" form does not...

Oh okay, I see now. Screen shots attached for reference.

Whichever tab div is selected by the user at the time the script injects the iframe gets an iframe with a properly set CSS height property. The other one doesn't get a CSS height property set, so the attribute height="0" overrides the default height, which I think is 300px, and completely hides the form.

When I check Google Chrome, the CSS height properties are BOTH set when the FIRST iframe is displayed. It could be that Firefox behaves differently from other browsers when an iframe is in a div that has display:none. Possibly loading of the page is deferred and therefore the height computation fails? Since there is no error that I can see in the console related to this, I don't know whether that is even in the ballpark.

Thank you jscher2000!!

You were correct, it was an issue with the height property. I was able to give that specific div a height and the form shows up now.

Thank you for taking the time and for your insightful comments!