views:

10777

answers:

16

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"&gt;Example Link</a></li>
      <li><a href="http://example.com"&gt;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?

A: 

In options you should set:

 navigation: true
Pim Jager
+2  A: 

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 */ });        
});
Darko Z
I'm impressed that you can roll your own accordion in so few lines of code. I'm hesitant to re-code what I'm doing right now just to see if I can improve the animation, but I may try this in the future.
Nathan Long
Thats the beauty of jQuery! Good luck
Darko Z
Well the future is here. I wanted to add a toggling plus/minus sign to my headers to indicate their state, so the headers needed to be <p> tags. It ended up not being too hard. Thanks for the suggestion. :)
Nathan Long
+6  A: 

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"&gt;

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.

Tyler
Old post but this just helped save me some trouble. My accordion was jerky, and the document had a doctype, but I've been using the HTML5 doctype for quite a while now -- it doesn't trigger quirks mode, but it creates a problem here. Changing to an older doctype fixed me right up.
Erik
+1  A: 

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

Josh
+1  A: 

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

Schulty
A: 

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

I think the autoheight must be false to have the css working correctly in IE6
TStamper
+2  A: 

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" >
Ben
A: 

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>

nedlud
oh, I should add I'm having the same issue in IE8 in compatibility mode. Turn compatibility off and it's fine
nedlud
A: 

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.

A: 

The problem still exist in 1.7.2 of JQueryUI Accordion. The workaround you suggested doesn't work for me. I opened a ticket in JQueryUI track http://dev.jqueryui.com/ticket/4989

Can you help me?

robob
A: 

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.

Joe Sepi
A: 

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

sebastien
A: 

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.

Menachem Almog
A: 

I'm using JQuery 1.4 and found

<!DOCTYPE html>

is ok for IE6,Chrome too.

andy
A: 

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.

Aaron
A: 

I was having lots of glitches and random flashes of content even using the jquery library in IE. Using the first DTD tag worked great. It actually solved several other frustrating UI problems on the page I was working on.
That explanation of quirks mode vs. strict mode answers a lot of questions. Great post.

JDC