Update
I am making this a community wiki, for three reasons:
- I don't feel like I got a definitive answer, but
- I have long since stopped needing an answer, because I rolled my own accordion function
- this question gets tons of views, so clearly lots of people are still interested
So if anybody wants to change/clarify this question and make it a definitive guide, be my guest.
I'm working on a page using jQuery's accordion UI element. I modeled my HTML on that example, except that inside the <li> elements, I have some unordered lists of links. Like this:
$(document).ready(function() {
$(".ui-accordion-container").accordion(
{active: "a.default", alwaysOpen: true, autoHeight: false}
);
});
<ul class="ui-accordion-container">
<li> <!-- Start accordion section -->
<a href='#' class="accordion-label">A Group of Links</a>
<ul class="linklist">
<li><a href="http://example.com">Example Link</a></li>
<li><a href="http://example.com">Example Link</a></li>
</ul>
<!--and of course there's another group -->
Problem: IE Animation stinks
Although IE7 animates the documentation's example accordion menu just fine, it has problems with mine. Specifically, one accordion menu on the page moves jerkily and has flashes of content. I know that it's not a CSS issue because the same thing happens if I don't include my CSS files.
The other accordion menu on the page opens the first section you click and, after that, won't open any of them.
Both of these problems are IE-specific, and both go away if I use the option animated: false. But I'd like to keep the default slide animation, since it helps the user understand what the menu is doing.
Is there another way?