jquery accordion collapsed by default on page load

Question

I am using JQuery UI accordion in my page. I have following Javascript code on my page load:

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

});

When the page loads all tabs are open for few seconds and then collapse. May be its loading effect. How can I make Jquery UI accordion collapsed on page load. Please suggest

Answer 1

Although not a direct answer, maybe you can render it hidden and then show it when its created:

$("#accordion").accordion({
   active: false,            
   autoHeight: false,            
   navigation: true,            
   collapsible: true,
   create: function(event, ui) { $("#accordion").show(); }
});

Update: This fiddle works for me: http://jsfiddle.net/47aSC/6/

Answer 2

For me this works:

$(function() {
    $( "#accordion" ).accordion({
            collapsible: true,
            autoHeight: true,
            active: false

        });
});