JQuery Accordion Auto Height issue

Question

I am using JQuery Accordion. I have this page here: http://www.hauppauge.com/site/support/support_colossus.html#tabs-6

What happens is the Auto Height is taking some time to load, before it loads there is a lot of white space below the content. When it finally does load the height will expand to longer then snap up to the correct height of the content. Is there a way for this to be seamless? I just want to be able to click an Accordion tab and have it expand smoothly to the exact height of the content.

Update 08/08/2014:

Use heightStyle: "content" if you're using version 1.9 and higher (Tarun's answer)

Use autoHeight: false for 1.8 and lower (iappwebdev's answer)

Answer 1

you should use

$("#accordion").accordion({ 

heightStyle: "content" 

});

It will set height according to your content. and will not use blank space as height.

Answer 2

So why don't you just set autoheight to false?

$( ".selector" ).accordion({ autoHeight: false });

http://jqueryui.com/demos/accordion/#option-autoHeight

EDIT

Looking at your comment:

// Accordion
$("#accordion").accordion({ header: "h3" });
$("#accordion").accordion({ collapsible: true });
$("#accordion").accordion({ autoHeight: false, navigation: true });

You are initialising the accordion and then you add more options to it. Why are you doing that? Default value for autoHeight is true, so every tab gets a fixed height. Put all options in one call:

// Accordion
$("#accordion").accordion({
    header: "h3",
    collapsible: true,
    autoHeight: false,
    navigation: true 
});

EDIT

Regarding your 2nd comment:

Have a look at http://jqueryui.com/demos/accordion/#option-header. You can see that option h3 is set by default, so you don't have to set it in your call.

And you get an answer to your question here: JQuery accordion doesn't work without h3 tags.

It's pretty important to go through jQuery API to improve your knowledge. For jQuery API go to http://api.jquery.com/ and for jQuery UI go to http://jqueryui.com/demos/. If you have any more questions, don't hesitate to ask after you tried to resolve your problem and after you did some research.

If all this answered your question, please mark it as correct answer.

Answer 3

$("#accordion").accordion({ 

heightStyle: "content" 

});

This is working in new version its worked for me !!!

Answer 4

This worked for me.

$( ".accordion" ).accordion({ 
 autoHeight: false,
 collapsible: true,
 navigation: true 
 });

Answer 5

If nothing works so far, just resize the jQuery Accordion contentElement - it is called data-content by default, unless you configured it differently:

$('.accordion').find('[data-content]').resize();

This would also work if you want to resize the Accordion after your data is loaded dynamically.