Collapse all the panels in the accordion by default

[renganathan]

Hi everyone,

I want to collapse all the panels in the accordion by default. For me first panel always active.


i tried various methods like

activeOnTop: true;

collapsed: false

Nothing has worked for me .......


Guys please suggest how to fix the problem?

[bt_bruno]

Hi @renganathan! I was reading Accordion.js source code and it doesn't seems that we have a native option for doing this. For default, at least one item in accordion layout will be expanded:

// If there is an expanded item, all others must be rendered collapsed.
if (me.expandedItem !== undefined) {
    comp.collapsed = true;
}
// Otherwise expand the first item with collapsed explicitly configured as false
else if (comp.hasOwnProperty('collapsed') && comp.collapsed === false) {
    comp.flex = 1;
    me.expandedItem = i;
} else {
    comp.collapsed = true;
}

But we can try to hack this I did a test...I added into my accordion panel a hidden item that is expanded. This way I made it possible to have all panels collapsed at first. Check it out:

new Ext.Panel({
	width: 200,
	height: 300,
	renderTo: Ext.getBody(),
	bodyStyle: 'border-top:none;', // << border hack
	layout: {
		type: 'accordion'
	},
	items: [{
		xtype: 'panel', // << fake hidden panel
		hidden: true,
		collapsed: false
	},{
		title: 'Item 1',
		html: 'Content 1'
	},{
		title: 'Item 2',
		html: 'Content 2'
	},{
		title: 'Item 3',
		html: 'Content 3'
	}]
});

I attached the final result. There is some border issues, that you could solve with CSS rules.
accordion_all_collapsed.gif

Of course you could try to rewrite Accordion.js and make a custom layout. Would be more elegant, but give you more work.

Cheers!

[renganathan]

Hi ,

Thanks for your solution . It was helped me to complete one module.

your work was highly appreciated

Thanks

[renganathan]

Hi ,


Collapse all the panels in the accordion by default is working fine.

can you help me how to collapse all the panels in the accordion by on click event?

Thanks in Advance!

[bt_bruno]

I can exemplify the handler that takes the accordion panel and collapse all it's children. You can dive the docs on how to add the handler to a button and etc...

onButtonCollapseAllClick: function(btn) {
	var panelAccordion = btn.up('#panel_accordion');
	panelAccordion.items.each(function(item) {
		item.collapse();
	});
}

Cheers!