jQuery UI - Accordion Display issues

Question

My accordion is working properly, but I'm having a JS issue that are prohibiting it from displaying correctly.

http://jsfiddle.net/frEWQ/4/

1. The JS is not applying .ui-corners-all to the H3 after the "kwick" div below it has finished collapsing, giving an odd cut-off border after the animation

Any suggestions?

Thanks

        // find elements to show and hide
    var toShow = clicked.next(),
        toHide = this.active.next(),
        data = {
            options: o,
            newHeader: clickedIsActive && o.collapsible ? $([]) : clicked,
            oldHeader: this.active,
            newContent: clickedIsActive && o.collapsible ? $([]) : toShow,
            oldContent: toHide
        },
        down = this.headers.index( this.active[0] ) > this.headers.index( clicked[0] );

    this.active = clickedIsActive ? $([]) : clicked;
    this._toggle(toShow, toHide, data, clickedIsActive, down);

    // switch classes
    this.active.removeClass("ui-state-active ui-corner-top").addClass("ui-state-default ui-corner-all")
        .find(".ui-icon").removeClass(o.icons.headerSelected).addClass(o.icons.header);
    if (!clickedIsActive) {
        clicked.removeClass("ui-state-default ui-corner-all").addClass("ui-state-active ui-corner-top")
            .find(".ui-icon").removeClass(o.icons.header).addClass(o.icons.headerSelected);
        clicked.next().addClass('ui-accordion-content-active');
    }

    return;

Answer 1

Updated: You could modify the source, but that isn't generally a good idea.

Because it's expecting that specific format you may need to do something tricky with CSS to avoid that flicker.

• How about have full 20px border-radius on all corners of the h3 at all times, even when the element is expanded.
• Have the content use some styles like the following: padding-top:20px; position:relative; top:-20px; padding-top:20px; position:relative; top:-20px; or something similar that will pad 20px and then correct the position by pulling it back up. That way, when it expands it's actually overlapping the h3 bottom corners. If that didn't work padding-top:20px; margin-top:-20px; padding-top:20px; margin-top:-20px; might.

In my mind this works. I'd try it on your jfiddle post but you haven't put the css source into the css frame.