Collapse all sections in accordion on page load in jQuery Accordion

Question

I am using JQuery Accordion, I want to hide all the sections on page load. Only when user clicks on header that section should open.

Answer 1

By url parameters you can expand specific tab or collapse all, for collapsing all use:

 $("#accordion").accordion('option', 'active' , 'null');

for expanding specific use:

$("#accordion").accordion('option', 'active' , <?php if($_GET['tab']!='')echo $_GET['tab'];else echo 'null'; ?>);

Answer 2

Use this in your document ready function when initialising the accordion:

$("#someid").accordion({collapsible : true, active : 'none'});

Answer 3

This should do it. However it you're looping through a list (in my case its MVC grouped By list) make sure the collapse class is outside of the loop to speed it up substantially.

$('.collapse').parent().find(".glyphicon-minus").removeClass("glyphicon-minus")
     .addClass("glyphicon-plus").css('color', 'green');

$('.collapse').collapse('hide');

Answer 4

active : 'none' is an invalid value, it may appear to work on the surface, but will break other aspects of the accordion widget. Use this instead:

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