jQuery Accordion: IE animation issues

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?

I feel your pain! I recently went through a ridiculous troubleshoot where I tore everything out of the master page and page layout block by block (this was actually in SharePoint), continuously slimming down the page.

The end result ended up being not having a doc type for the html document (some developer had removed it). The lack of a doctype meant that IE 7 was running in quirks mode and the inline CSS emitted by the JQuery Accordion was behaving funky.

Consider adding:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

At the top of your masterpage or html document (if there's not already a doctype defined).

There's actually a whole site dedicated to Quirks Mode behavior. You can check out an article about Quirks Mode here. I wrote a post which has a little more surrounding information on the troubleshoot.

IanI

Same problem as all in IE7 with well formed standard HTML markup. What finally worked was removing autoHeight: "false" and using clearStyle: "true".
I also created an IE < 8 version of the accordion Initialization with:

if ( $.browser.msie && $.browser.version < 8 ) {
    //ie<8 version
}
else {
    //version for the good browsers
}

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 */ });        
});

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...

I have a similar issue, and i fix it by adding this doc type. And it works in both IE and FF

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

Change your anchor tags to SPAN tags. I was experiencing the same problem and that worked well. The same goes for DIV tags, IE trips out when those are in the accordion for some reason. Position:Absolute may also freak IE out, fyi

I'm using JQuery 1.4 and found

<!DOCTYPE html>

is ok for IE6,Chrome too.

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...

In options you should set:

 navigation: true

Just change 'autoHeight: false' to 'autoHeight: true'.

Having similar issues, and I notice a few people suggesting looking at doctypes. I just tried viewing the actual jQuery UI site and their demo accordion work just fine in ie6, suggesting it is a problem with my code (more detective work for me). But I also notice that the jquery.UI sites doctype is simply <!DOCTYPE html>

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.

I was having a problem where the div below my header in the accordion, which had a white background over a blue page background, had its background-color disappearing. Sometimes when hovering over another header element, it would show up; sometimes when highlighting text, it would show up again too. It was very strange and ONLY HAPPENING IN IE7.

Applying zoom:1; targeting only IE7 on the ui-content div fixed this.

I hope that helps someone because I just spent several hours trying to track this down.

Try to use this:

{active: "a.default", alwaysOpen: "true", autoHeight: "false"}

instead of this:

{active: "a.default", alwaysOpen: true, autoHeight: false}

Explorer has issues with this kind of syntax.

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.

sebastien

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.

来源：https://stackoverflow.com/questions/332448/jquery-accordion-ie-animation-issues

标签

jquery

accordion