Question

We’ve got this very annoying problem with Scriptaculous and Internet Explorer 7/8. We have two Effect.toggles on the same page, but only one of them is ever working (the first one). I hope it’s some simple mistake in my implementation, but I can’t seem to find any decent documentation. Hopefully somebody here can help.

The HTML/JS looks like this:

<ul>
    <li id="LinkA" class="icon">
        <a onclick="new Effect.toggle('divA', 'slide', { duration: 0.6 }); return false;" href="#">Show List A</a>
    </li>
</ul>
<div id="divA" style="display:none">
    <div>
        -- Things to display --
    </div>
</div>
<ul>
    <li id="LinkB" class="icon">
        <a onclick="new Effect.toggle('divB', 'slide', { duration: 0.6 }); return false;" href="#">Show List B</a>
    </li>
</ul>
<div id="divB" style="display:none">
    <div>
        -- Things to display --
    </div>
</div>

It works perfectly in Chrome and Firefox, but the second one never works in IE 7 or 8, no matter what I do.

Any help would be greatly appreciated!

Answer 1

My bad all round. The HTML was being constructed in Javascript upon a button click, but since that was complicated to paste here, I simplified it to the code that was created. It turns out that the construction of the HTML by the Javascript was the thing causing the issue (apparently stopping Prototype and Scriptaculous from being able to find the second DIV’s ID — why the first one should have worked fine, I don’t know).

All done now… I only wish I could close this question 🙁