Extjs accordion close all panel dynamically

Question

I am using Extjs 5.0.0

I have an accordion with a number of panels. Here my requirement is to expand and collapse panel by clicking on the title.

On the first click it expanded, that's fine. while again clicking on the same title i want to collapse all the panels. Here its opening the very next panel.

I just tried by expanding a hidden panel. But here both hidden panel and the next panel to the clicked panel get expanded.

listeners:{
    afterrender: function(panel){
        panel.header.el.on('click', function() {
          if (panel.collapsed) {
             Ext.getCmp('hiddenpanel').collapse();
          }
          else {
             Ext.getCmp('hiddenpanel').expand();
          }
        });
    }
}

Is there any solution to solve this problem ?

Thanks

Answer 1

If you are okay with opening multiple accordion items at a time, enable mutli property and set all other panels except the hidden panel collapsed by default will resolve the issue.

Ext.create('Ext.panel.Panel', {
   title: 'Accordion Layout',
   width: 300,
   height: 300,   
   layout: {
      type: 'accordion',      
      animate: true,
      multi: true,
   },
   items: [{
      hidden:true,        
   },{
      title: 'Panel 1',
      html: 'Panel content!',
      collapsed: true
   },{
      title: 'Panel 2',
      html: 'Panel content!',
      collapsed: true
   },{
      title: 'Panel 3',
      html: 'Panel content!',
      collapsed: true
   }],
   renderTo: Ext.getBody()
});

Jsfiddle

Edit : For versions above Ext 5.

Ext.application({          
    launch: function() {    
        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            autoScroll: true,
            defaults: {
                border: true,
                autoHeight: true,
                minHeight: 304,
                collapsed: true,
                titleCollapse: false
            },
            layout: {
                type: 'accordion',
                animate: true,
                multi: true,
                fill: false
            },
            items: [{
                collapsed: false,
                border: 0,
                height: 0,
                minHeight: 0
            }, {
                title: 'Panel 1'
            }, {
                title: 'Panel 2'
            }, {
                title: 'Panel 3'
            }, {
                title: 'Panel 4'
            }, {
                title: 'Panel 5'
            }],
        });    
    }
});