How to use the Accordion in JavaFX

It is perfect to use the Accordion in JavaFX if you have JavaFX TitledPanes in your application. The accordion displays a group of TitledPane controls where only one of them is expanded at a time. The accordion is very easy to create and use in JavaFX.

In this tutorial, you will learn how to use the JavaFX Accordion and I will walk you through creating the accordion and showing examples below to show the uses of the accordion container.

Contents

JavaFX Accordion is very easy to create and use, Accordion stores lists of TitledPane and you can be able to expand one TitledPane at a time. Whenever you open a TitledPane and the other expanded TitledPane will be collapsed automatically. To learn more about the Accordion, kindly go ahead below to see the example code snippets and apply this to your project.

Create the JavaFX Accordion

We have options to create this node in JavaFX, we can use Scene Builder and code it manually. If you want to know how to create the node using Scene Builder you can watch the YouTube video below. In this example, I will show you how to create the Accordion manually by coding it. The Accordion class has only one constructor to use to create this node.

// create the Accordion
Accordion accordion = new Accordion();

Now, we created an empty Accordion and what we will do next is to create the TitledPane which we will add to the Accordion.

// let's create the titledpane
TitledPane tp1 = new TitledPane();
TitledPane tp2 = new TitledPane();
TitledPane tp3 = new TitledPane();

Add to Scene Graph

Once you created the node, you need to add it to the scene graph to display it to the application. If you are using the scene builder, you can use the FXMLLoader class to load the fxml file. Otherwise, you need to code it, and you need to use the layout in JavaFX. The example code below will show you how to show the node to the scene graph.

// create the titledpane
TitledPane tp1 = new TitledPane();
TitledPane tp2 = new TitledPane();
TitledPane tp3 = new TitledPane();

// create the node
Accordion accordion = new Accordion();
accordion.getPanes().addAll(tp1, tp2, tp3);

// create the layout and scene
StackPane layout = new StackPane(accordion);
Scene scene = new Scene(layout, 400, 400);
stage.setScene(scene);
stage.show();

Output

Add CSS to your Accordion

You need to add CSS to your JavaFX application if you want your application’s appearance to be good-looking. The Accordion in JavaFX does not lack any CSS properties but the following CSS example below will be changing the background color of the TitledPane’s title.

.accordion > .titled-pane > .title {
 -fx-background-color: burlywood;
 -fx-background-insets: 1;
}

.accordion > .first-titled-pane > .title {
 -fx-background-color: derive(red, 80%);
}