Jquery Accordion Collapsed By Default On Page Load

I am using JQuery UI accordion in my page. I have following Javascript code on my page load: $(function() { $('#accordion').accordion({ active: false, a

Solution 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/

Solution 2:

For me this works:

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

        });
});

Solution 3:

It's probably loading something near the end of the page slowly. If you can't fix that, you could try declaring the element having display:none applied to it in css, then:

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

There could be a cleaner way of doing that (as @Mrchief suggests), but I don't think .accordion() formats hidden elements nicely. You'll have to test.

Solution 4:

The best solution is:

open jquery.ui.accordion.js and edit lines 29 and 31 (by the way I'm using 1.10.4).

Edit line 29 to Active: 100, Edit line 31 to collapsible: true,

This way you don't need to write any script or function in the header of the page. By setting Active to a high number (for example 100) you are saying that 100th h3 tag is active (which basically doesn't exist).

The collapsible: true says that all open h3 tags are collapsible.

It solves the problem completely.

Solution 5:

$(document).ready(function() {
   $('.collapse').collapse({
     toggle: false
   });
});

This will set all .collapse classes in DOM to close, but only once the DOM has finished loading.