• JavaFX Accordion Example
• Create an Accordion
• Add TitledPane Objects to Accordion
• Add Accordion to Scene Graph

The JavaFX Accordion control is a container control which can contain several sections internally, each of which can have their content expanded or collapsed. The Accordion control is implemented by the JavaFX class javafx.scene.control.Accordion. The section displayed inside it are made up of JavaFX TitledPane controls. Here is a screenshot of a JavaFX Accordion control:

Notice that none of the sections are expanded. You can expand a section by clicking on the little triangle next to the title for each section. Expanding a section will reveal its content. Here is a screenshot of a JavaFX Accordion with a section expanded:

JavaFX Accordion Example

Here is a full JavaFX Accordion example so you can quickly get an overview of what its usage looks like:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Accordion;
import javafx.scene.control.Label;
import javafx.scene.control.TitledPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class AccordionExample extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    public void start(Stage primaryStage) {

        Accordion accordion = new Accordion();

        TitledPane pane1 = new TitledPane("Boats" , new Label("Show all boats available"));
        TitledPane pane2 = new TitledPane("Cars"  , new Label("Show all cars available"));
        TitledPane pane3 = new TitledPane("Planes", new Label("Show all planes available"));

        accordion.getPanes().add(pane1);
        accordion.getPanes().add(pane2);
        accordion.getPanes().add(pane3);

        VBox vBox = new VBox(accordion);
        Scene scene = new Scene(vBox);

        primaryStage.setScene(scene);

        primaryStage.show();
    }
}

Create an Accordion

Before you can use the JavaFX Accordion control you must first instantiate it. You instantiate it simply using the Java new command, like this:

Accordion accordion = new Accordion();

Add TitledPane Objects to Accordion

Each section displayed inside a JavaFX Accordion is represented by a JavaFX TitledPane. To add sections to the Accordion control, you create on TitledPane per section, and add it to the Accordion. Here is an example of adding TitledPane sections to a JavaFX Accordion:

Accordion accordion = new Accordion();

TitledPane pane1 = new TitledPane("Boats" , new Label("Show all boats available"));
TitledPane pane2 = new TitledPane("Cars"  , new Label("Show all cars available"));
TitledPane pane3 = new TitledPane("Planes", new Label("Show all planes available"));

accordion.getPanes().add(pane1);
accordion.getPanes().add(pane2);
accordion.getPanes().add(pane3);

Add Accordion to Scene Graph

To make a JavaFX Accordion visible, you must add it to the scene graph. Here is an example of adding a JavaFX Accordion to the JavaFX scene graph:

Accordion accordion = new Accordion();

VBox vBox = new VBox(accordion);
Scene scene = new Scene(vBox);

primaryStage.setScene(scene);

primaryStage.show();