JQuery Accordion Auto Height issue

Solution 1:

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:

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.

Solution 3:

$("#accordion").accordion({ 

heightStyle: "content" 

});

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