jQuery Accordion

In the XOT template you have the Accordion Navigator page type, which I believe uses the jQuery accordion widget . There are various jQuery options that can be set when it comes to styling, but for some reason I can't get heightStyle to work.

Essentially, I want the height of each accordion panel to fit the size of the content, rather than filling the whole page. So, this should work:

Unfortunately, it doesn't.

Here is a link so you can see what I mean: xerte.cardiff.ac.uk/play_5135

Page 1 - An accordion I declared myself which works as required
Page 7 - The default settings on Accordion Navigator page
Page 8 - A failed attempt to apply my preferred style to the Accordion Navigator page

Ideally, I would like the accordion on Page 8 to function like the accordion on Page 1 (this is preferable for users who won't want to add an accordion via HTML and would be better adding it through the Xerte interface).

Any ideas?

The height of the content is also hardcoded so you need to overrule that as well:

This worked for me:

I've just added new 'panel height' optional properties to the accordion & tabbed navigator pages that will control this