jQuery accordion gets minimum height when loaded in collapsed content

Question

Some content is collapsed by default with display: none; , and I have a JS function that changes its state to display the content. I'd like to load an accordion inside this collapsed content, but when I do, the height of the accordion gets messed up - it gets minimum height, only like 20px or so per tab.

I understand that I probably must have the accordion height reset when the JS function is triggered that expands the content. How can do achieve this? What is the function called? Thank you!

Answer 1

Jquery accordion height is properly calculated only when its displayed. Thus, using jQuery UI 1.10.0 and above call

$('.myAccordian').accordion("refresh");

right after displaying accordion content.