Solve Flickering jQuery accordion issue in MOSS 2007

MOSS 2007 for the simple reason of missing a DOCTYPE can screw up the smoothness of animations created through jQuery. One of my situations didn’t allow me to add DOCTYPE to my master and my clients ended up seeing flickering animation of the accordion. Seriously that was irritating. Being an ardent admirer and an evangelist of jQuery, it gave me a shock. But after some level of problem analysis and testing, i was able to get hold of a workaround.

One piece of advice: If you could add a DOCTYPE to your masterpage, you can very well get rid of this flickering issue.

Solution:

The sliding down effect of accordion was firing the callback once, while slidingup was triggering the callback twice. That was the catch. All i did was introduce a delay during the slide up operation, so that the first callback is veiled and only one invoke is visible.

Code Fix:

//Pause method which is to be used for the accordion slideup veil

var speed = 300;

function pausejs(millis) {
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while (curDate – date < millis);
}

$(“#accordion h2”).live(‘click’, function() {
$(“#accordion div”).slideUp(speed);     //slide up all the accordion children
        pausejs(speed);      //introduce a delay before the next code is executed
if ($(this).next().is(“:hidden”)) {      //opens up the respective child
$(this).next().slideDown(speed);
}
});

Explanation:

On clicking any of h2 (accordion headers), slide up all the accordion content/children. Then open up the respective accordion content/children. But before you open up / slideDown the respective child, ensure that the slideUp operation was complete. For this we introduce the delay.

You can also try using the callback argument of the slideUp(speed, callbackfunction) and invoke the slideDown of the respective child on completion of slideUp operation. However, since i did not find the flickering issue not getting resolved, i did not go ahead with that.