From Learn About the Ext JavaScript Library

Ext Manual > Widgets > Layouts >

Ext.Accordion

Examples

Example 1

new Ext.Panel({
  renderTo:document.body,
  autoHeight: true,
  title: 'Accordion Layout',
  layout: 'accordion',
  defaults: {
    bodyStyle: 'padding:0.2em'
  },
  layoutConfig: {
    titleCollapse: true,
    animate: false,
    fill: false
  },
  items:[
    new Ext.Panel({
      title: 'My Panel 1',
      contentEl:"panel1-markup"
    }),
    new Ext.Panel({
      title: 'My Panel 2',
      contentEl:"panel2-markup"
    })
  ]
});

HTML markup - include this on the page to put content into the panels

<div style="display:none">
  <table id="panel1-markup">
    <tr><td>this is just some quick markup</td></tr>
    <tr><td>to show a table as content</td></tr>
  </table>
  <div id="panel2-markup">this is a different element that's
  populating the panel.</div>
</div>

Links

• Accordion documentation