Hi there. 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!