jQuery Accordion: IE animation issues

Question

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?

Answer 1

I've actually avoided using the accordion plugin as I found it a little bit inflexible for my needs. I've found that the easiest and most flexible accordion is as simple as:

var accordion = function(toggleEl, accEl) {
    toggleEl.click(function() {
        accEl.slideToggle(function() { });
        return false;
    });
}

for your example you would use it like this:

$(document).ready(function() {
    new accordion($("a.accordion-label"), $("ul. linklist"));        
});

you can use this as a template and build in css class adding, callbacks and other useful stuff, but I've found that in the end it was much easier to do it this way than to dick around with the accordion plugin.

EDIT: Sample code with a callback function

var accordion = function(toggleEl, accEl, callback) {
    toggleEl.click(function() {
        accEl.slideToggle(callback);
        return false;
    });
}

$(document).ready(function() {
    new accordion($("a.accordion-label"), $("ul. linklist"), function() { /* some callback */ });        
});

Answer 2

I actually found the opposit of sebastien - I had min-heights on the internal content DIVs which were causing the jerky animation. I took them off and things improved. But I'm not sure how this interacts with autoheight - according to the syntax, mine is set to "false", but my accordion definitely seems to be ignoring that...

Answer 3

I had a similar problem with an accordion in IE6 and IE7 where I was not using the default HTML structure for the accordion. Strangely enough, fixing the horizontal size of the accordion elements to a certain number of pixels cleared up the problems with the accordion animation. Why? I don't know. But I observed that the problems were specific to using autoHeight: true and the problems occurred at the end of the animation where I assume the height of the accordion elements is reset. And we all know IE cannot do math.

Answer 4

Ran into the same issue, but this fixed it for IE 6 and 7:

$().ready(function(){
  $(".ui-accordion-header").click(function() {
    $(this).next().fadeIn();
  });
)};

I think it makes the sliding look nicer anyway...

Answer 5

I've been experimenting the same issue and after a while of messing around I found that if you have an element contained inside your main div with relative positioning, it will cause IE to open the accordion "jerky". Here's what I was doing...

<div id="accordion">

  <h3 class="oneLine">Asylum</h3>

  <div class="serviceBlockContent">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed augue a enim convallis facilisis. Aenean eu ullamcorper nulla. Ut id urna quis augue bibendum commodo et a quam.</p>
  </div>

</div>

I had the H3 element position set to relative and that caused it to break in IE. Hope this is helpful.

Answer 6

Just change autoHeight: false to autoHeight: true --> it worked for me, but wasn't what I want...

Find that putting min-height for IE7 solved the problem.