JQuery Accordion Auto Height issue

JqueryAccordion

Jquery Problem Overview


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)

Jquery Solutions


Solution 1 - Jquery

you should use

$("#accordion").accordion({ 

heightStyle: "content" 

});

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

Solution 2 - Jquery

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: https://stackoverflow.com/questions/1183751/jquery-accordion-doesnt-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.

Solution 3 - Jquery

$("#accordion").accordion({ 

heightStyle: "content" 

});

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

Solution 4 - Jquery

This worked for me.

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

Solution 5 - Jquery

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionKimView Question on Stackoverflow
Solution 1 - JqueryTarun GuptaView Answer on Stackoverflow
Solution 2 - JqueryiappwebdevView Answer on Stackoverflow
Solution 3 - JquerymithunSalindaView Answer on Stackoverflow
Solution 4 - JqueryShwetaView Answer on Stackoverflow
Solution 5 - Jquerytsveti_ikoView Answer on Stackoverflow