Introduction

There already a lot of components in the ZK framework. In this blog post, I will introduce a new one that I　have created: Accordion, a horizontal accordion component that is based on liteAccordion, a jQuery plug-in.

Accordion includes the following features:

• Supports any ZK components as children
• Supports all the native themes (basic, dark, light and stitch)
• Cross-browser compatibility
• Good look and feel
• Downsized

Demo

Following is an example of how you can use the component:

<accordion>
  <accordionpanel title="Title A">
    <window title="A Window">
      <label value="AAA" />
    </window>
  </accordionpanel>
  <accordionpanel title="Title B">
    <window title="B Window">
      <label value="BBB" />
    </window>
  </accordionpanel>
</accordion>

As shown above, you can place any ZK component inside an accordionpanel. The Accordion component also supports the onSelect event, fired when you select an accordionpanel. Like in the demo, accordionpanel‘s child components can be added or removed dynamically as shown below:

  // ac refers to the parent Accordion
  // Dynamically add a new accordion panel
  Accordionpanel p = new Accordionpanel();
  p.setTitle("New Empty Panel");
  ac.appendChild(p);

  // Dynamically remove a selected accordion panel
  Accordionpanel p = ac.getSelectedpanel();
  if (p != null) {
    ac.removeChild(p);
  }

Download
You can download the component and the demo application here.