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
To create an accordion that is collapsed by default, we need to set the 'active' property of the jQuery Accordion as false. Syntax: $("#demoAccordion"). accordion({ collapsible: true, active: false});
By default all accordions are closed. User can open any of them and those will stay opened until the user manually closes them by clicking on the accordion title.
Try this
$('#acc1').accordion({
collapsible: true,
autoHeight: false,
active: false
});
I have created this one:
http://sarfraznawaz.wordpress.com/2010/03/09/creating-stylish-sliding-menu-with-jquery/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With