6.9. 

The Accordion is a multicomponent container that ressembles the TabSheet. It allows switching between the components with vertically arranged "tabs". Clicking on a tab opens its contained component between the selected tab header and the next one. An accordion can be used identically to a TabSheet. See Section 6.8, “TabSheet” for additional information.

A simple accordion with a label on each page can be created like a TabSheet:

Label l1 = new Label("There are no previously saved actions.");
Label l2 = new Label("There are no saved notes.");
Label l3 = new Label("There are currently no issues.");

Accordion a = new Accordion();
a.setHeight("300px");
a.setWidth("400px");
a.addTab(l1, "Saved actions", null);
a.addTab(l2, "Notes", null);
a.addTab(l3, "Issues", null);

Figure 6.10. A Simple Accordion Layout

.i-accordion {}
.i-accordion-item {}
.i-accordion-item-open {}
.i-accordion-item-first {}
.i-accordion-item-caption {}
.i-accordion-item-caption .i-caption {}
.i-accordion-item-content {}