jQuery Accordion open collapsed

Hi,

using jquery v1.3.2 and jQuery UI 1.7.1

I have 1 tab control with 3 tabs in it. Each tab contains 1 accordion control.

$(document).ready(function() {
$('#acc1').accordion({ collapsible: true, autoHeight: false });  

$('#acc1').accordion({ collapsible: true, autoHeight: false });  

$('#acc1').accordion({ collapsible: true, autoHeight: false });

$('#tabControl').tabs();

});

tabControl is not visible at page load. There is button that opens it.

$("#btnShow").bind("click", function() {
$('#tabControl').slideToggle("slow");
});

I can't find the way to have all accordion controls collapsed. Every time I show tabControl, accordions in it have first item always expanded.

I have tried this:

$('#acc1First').css('display', 'none');
$('#acc2First').css('display', 'none');
$('#acc3First').css('display', 'none');

$('#acc1First').slideUp();
$('#acc2First').slideUp();
$('#acc3First').slideUp();

but it bugges sometimes, first item have to be clicked 2 times to work properly etc.

Is there any way to initialize accordion control with all items collapsed ?

Thanks

From stackoverflow

• Try this

  $('#acc1').accordion({ 
      collapsible: true, 
      autoHeight: false, 
      active: false 
  });
  

• The answer above worked a treat for me. Tx!

  Ólafur Waage : You're welcome :)

• I have created this one:

  http://sarfraznawaz.wordpress.com/2010/03/09/creating-stylish-sliding-menu-with-jquery/

• Worked great for me as well. Thanks Olafur!