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

@Andrew: Please check the link. http://jsfiddle.net/47aSC/ sorry I used it for the first time and its not formatted. I guess jquery links need to be from live site. — DotnetSparrow, Jul 04 '11 at 20:14
Possible dup of http://stackoverflow.com/questions/4633971/how-do-i-keep-jquery-ui-accordion-collapsed-by-default — Mrchief, Jul 04 '11 at 20:21
Possible duplicate of [Collapse all sections in accordian on page load in jQuery Accordian](http://stackoverflow.com/questions/2675263/collapse-all-sections-in-accordian-on-page-load-in-jquery-accordian) — rofrol, Feb 06 '16 at 07:51

Mrchief · Accepted Answer · 2011-07-04T20:32:37.177

12

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/

edited Jul 04 '11 at 20:32

answered Jul 04 '11 at 20:05

Mrchief

75,126
20
142
189

@mootinator @Merchief: I used display none and used your code samples (both) but when page loads then accordion is invisible and appears suddenly. I want accordion to be there but collapsed when page loads – DotnetSparrow Jul 04 '11 at 20:12
Well, according to the documentation, having `{active: false, collapsible: true}` should render everything collapsed. I wonder if something else is interfering. Can you create a jsfiddle with your issue? – Mrchief Jul 04 '11 at 20:19
. jsfiddle.net/47aSC sorry I used it for the first time and its not formatted. I guess jquery links need to be from live site. I am using this in asp.net content page. may be thats the reason ? – DotnetSparrow Jul 04 '11 at 20:22
Check your jQuery.js and jQuery UI js version. Maybe you're using an old and buggy version? – Mrchief Jul 04 '11 at 20:23
Edited your fiddle to use latest libraries. Can you update with your css too? http://jsfiddle.net/47aSC/1/ – Mrchief Jul 04 '11 at 20:24
Added themes too: http://jsfiddle.net/47aSC/5/. I can see everything collapsed by default. – Mrchief Jul 04 '11 at 20:29
I am using jquery-1.5.1.min and jquery-ui-1.8.11.custom.min – DotnetSparrow Jul 04 '11 at 20:29
and css like this: jquery-ui-1.8.11.custom.css – DotnetSparrow Jul 04 '11 at 20:31

score 9 · Answer 2 · answered Aug 25 '12 at 13:07

9

For me this works:

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

        });
});

answered Aug 25 '12 at 13:07

mat0r

137
1
9

score 3 · Answer 3 · answered Jul 04 '11 at 20:04

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.

EhsanSia · Answer 4 · 2014-07-22T06:02:12.047

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.

score 2 · Answer 5 · edited Jan 23 '17 at 09:56

2

$(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.

edited Jan 23 '17 at 09:56

IronAces

1,857
1
27
36

answered Jan 23 '17 at 09:25

Bhargav Chudasama

398
5
11

score 0 · Answer 6 · answered May 15 '17 at 07:25

// We can also use the below code to collapse accordian on the page load and it should use when we are using bootstrap 2.0

    $(document).ready(function () {
          if ($("#accordianId").length>0) {
                        $("#accordianId").trigger("click");
                    }
             });

Other wise we should use below code for bootstrap 3.0

$( "#accordianId" ).accordion( "option", "active", 0 );

jquery accordion collapsed by default on page load

6 Answers6

Linked