Accordion Height set to zero issue

[aylacullen]

This isn't really a glitch in WP-UI, but more of a glitch in jQuery UI that can be easily addressed. When you have two tabs, with each tab containing an accordion, the visible tab's accordion will display properly. The nonvisible tab's accordion however will show up as "blank" (checking source via inspector shows it's set to zero), so when you switch to that tab, it shows up as "blank". Refreshing the page causes it to display fine, but then the first tab's accordion is now set to zero.

See bug report: http://forum.jquery.com/topic/accordion-height-set-to-zero-issue

The solution is simple: edit the code so when the unopened tab is clicked for the first tab, run this code:

.accordion( "refresh" )

That will eliminate the glitch. Something like:

if(this.tab.runonce = false) {
    .accordion( "refresh" );
    this.tab.runonce = true;
}

Adding code to ensure it only runs once for the particular unopened tab will ensure no performance issues occur from running refresh every time the tab is opened. Hopefully you can implement this. I'd do it, except I'm not familiar with your code enough to edit it without breaking something.

[aylacullen]

Found the solution. It wasn't what I said above. The solution was to simply set autoHeight to false. Accordions started displaying properly in all tabs.

A good solution would be perhaps by having accordion run a test upon initialization to see if it's set to visible, and if not, then another test to see if it's in within a tab, and if so, automatically destroy the accordion, reinitialize and set part particular accordion's autoHeight to false to avoid the bug.

Either that or add a FAQ question something like this:

Q. I have accordions in more than one tab. When I open another tab with an accordion in it, the accordion shows up as blank. Why?

A. This is a known issue with jQuery. There is a workaround by setting the accordion autoHeight property to false. 

The FAQ might be easier for you.