Question

There is a plug-in for jQuery that allows you to build horizontal accordions, it works great in all browsers except firefox. My main problem is that I’m somewhat unfamiliar with debugging client side code, I’m a Java programmer mostly, although I do have a good understanding of client technologies, actually trying to debug this issue leaves me lost, could someone please look at the bug, if possible determine the root cause, and share how they approached the issue?

I’ve already set up a reproduction of the code, the gray bars are “handles” click them to expand their content, light gray means already expanded, dark gray means minimized

when I refer to the accordion I mean the full component, in this case, the two handles, and the content that is shown

Here are some things I already know to get you started:

• during the animation the size of the accordion increases by 1 or 2 pixels
• the bug is obvious when the containing div has a size set to the size of the accordion
• if the size of the containing div is increased the size still increases producing a “quivering effect” of the rightmost edge
• the problem is only present on firefox

Answer 1

Try adjusting the CSS a bit (updated demo):

#containingDiv {
    height : 200px;
    width : 460px;
    overflow: hidden;
}

#myAccordion {
    width: 2000px; /* should be wide enough to contain all panels - max width in opera is 32766 */
}

---

Update: After referring to the standard CSS for the hrzAccordion, I discovered that adding a negative right margin to the handle fixed all flickering problems (updated demo):

.handle {
    height : 200px;
    width : 30px;
    background : #aaaaaa;
    margin : 0 -1px 0 0;
    padding : 0px;
}