How-To's > How do I create an accordion?

Version: JavaFX 1.3

The accordion is a specialized container with multiple sections. These sections can be opened to reveal content, or closed so that only the title of the section is visible. They are often seen as a vertically stacked container in the left or right sidebar, but can also be implemented as containers stacked side by side to create an elegant effect.

Accordion containers have two important features: organization and elegance. The use of an accordion in the main panel takes advantage of the elegant slide effect of the accordion to present information to the user. The use of an accordion in the sidebar utilizes the elegance of accordions in organizing groups of content.

Each accordion panel can contain similar elements. For example, each panel can have links related to a certain topic. Alternatively, the content in each of the panels can be different with one panel containing links, another containing a set of buttons, and yet another containing images. Accordion containers can be implemented either so that only one of the sections can be opened at a time or so that several sections can be open simultaneously.

To create an accordion in JavaFX, start with the code from the following sample and modify it to suit your purposes.

Examples

  • The MemeFX Project New window
    This open-source project includes a Web Start application called ImagesAccordion Control Demo. There is also documentation for the Images Accordion. The accordion occupies the entire screen of the application, and the accordion panels are stacked side by side and contain pictures.

Last Updated: April 2010
[Return to How-To's Home]