JavaFX - Accordion

---

---

An accordion serves as a container for one or more title panels. These title panels are a panel with titles and they can be expanded or collapsed by clicking on their headers. However, only one title pane is allowed to open at a time. An accordion is useful for organizing the UI into sections that can be hidden or shown as needed.

The below figure depicts an Accordion −

Accordion in JavaFX

In JavaFX, an accordion is represented by a class named Accordion. This class belongs to the package javafx.scene.control. By instantiating this class, we can create an Accordion node in JavaFX.

Two constructors are available for this class, and they are as follows −

• Accordion() − It is used for creating an accordion without TitledPane.

• Accordion(...TitledPanes) − It will create an accordion with the specified TitledPane.

Steps to create an Accordion in JavaFX

Follow the steps given below to create an accordion in JavaFX.

Step 1: Create two or more TitledPane

We can create title panes in JavaFX by instantiating the class named TitledPane which belongs to a package javafx.scene.control. Instantiate this class as shown below −

//Creating a TitledPane object         
TitledPane paneOne = new TitledPane();

Similarly, create the required number of title panes.

Step 2: Set title and contents to the TitledPane

Specify the title and content of the title pane using the setText() and setContent() methods respectively as shown in the following code block.

paneOne.setText("Your Name");
paneOne.setContent(new Label("My name is: \n Ansh")); 

Remember, we can customize the content of the TitledPane as per our requirements with different UI nodes of JavaFX.

Step 3: Instantiate Accordion class

Instantiate the Accordion class of package javafx.scene.control without passing any parameter value to its constructor and add all the TitledPane using the following code blocks −

Accordion accordionNew = new Accordion();
accordionNew.getPanes().addAll(paneOne, paneTwo, paneThree);

Step 4: Launching Application

Once the accordion is created, follow the given steps below to launch the application properly −

• Firstly, instantiate the class named VBox by passing the Accordion object as a parameter value to its constructor.

• Then, instantiate the class named Scene by passing the VBox object as a parameter value to its constructor. We can also pass dimensions of the application screen as optional parameters to this constructor.

• Then, set the title to the stage using the setTitle() method of the Stage class.

• Now, a Scene object is added to the stage using the setScene() method of the class named Stage.

• Display the contents of the scene using the method named show().

• Lastly, the application is launched with the help of the launch() method.

Example

Following is the program which will create an accordion using JavaFX. Save this code in a file with the name JavafxAccordion.java.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Accordion;
import javafx.scene.control.TitledPane;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class JavafxAccordion extends Application {
   @Override
   public void start(Stage stage) {
      //Creating the first TitledPane
      TitledPane paneOne = new TitledPane();
      paneOne.setText("Your Name");
      paneOne.setContent(new Label("My name is: \n Ansh"));
      //Creating the second TitledPane
      TitledPane paneTwo = new TitledPane();
      paneTwo.setText("Your Address");
      paneTwo.setContent(new Label("My address is: \n Hyderabad \n Telangana"));
      //Creating the third TitledPane
      TitledPane paneThree = new TitledPane();
      paneThree.setText("Your Job");
      paneThree.setContent(new Label("My job role is: \n Content Engineer"));
      //Creating an Accordion for all TitledPane
      Accordion accordionNew = new Accordion();
      accordionNew.getPanes().addAll(paneOne, paneTwo, paneThree);
      accordionNew.setExpandedPane(paneOne);
      VBox root = new VBox(accordionNew);
      //Setting the stage
      Scene scene = new Scene(root, 500, 500, Color.BEIGE);
      stage.setTitle("Accordion in JavaFX");
      stage.setScene(scene);
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}   

Compile and execute the saved Java file from the command prompt using the following commands.

javac --module-path %PATH_TO_FX% --add-modules javafx.controls JavafxAccordion.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls JavafxAccordion

Output

On executing, the above program generates a JavaFX window displaying an accordion as shown below.

Creating an Accordion in JavaFX using its parameterized constructor

As previously discussed, there are two ways to create an Accordion in JavaFX: one utilizes the default constructor of Accordion class, while the other uses its parameterized constructor. In the next example, we are going to use the parameterized constructor of the Accordion class to create an accordion in JavaFX. Save this Java code in a file with the name JavafxAccordion.java.

Example

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Accordion;
import javafx.scene.control.TitledPane;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class JavafxAccordion extends Application {
   @Override
   public void start(Stage stage) {
      //Creating the first TitledPane
      TitledPane paneOne = new TitledPane();
      paneOne.setText("Your Name");
      paneOne.setContent(new Label("My name is: \n Ansh"));
      //Creating the second TitledPane
      TitledPane paneTwo = new TitledPane();
      paneTwo.setText("Your Address");
      paneTwo.setContent(new Label("My address is: \n Hyderabad \n Telangana"));
      //Creating the third TitledPane
      TitledPane paneThree = new TitledPane();
      paneThree.setText("Your Job");
      paneThree.setContent(new Label("My job role is: \n Content Engineer"));
      //Creating an Accordion for all TitledPane
      Accordion accordionNew = new Accordion(paneOne, paneTwo, paneThree);
      accordionNew.setExpandedPane(paneThree);
      VBox root = new VBox(accordionNew);
      //Setting the stage
      Scene scene = new Scene(root, 500, 500, Color.BEIGE);
      stage.setTitle("Accordion in JavaFX");
      stage.setScene(scene);
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}  

Compile and execute the saved java file from the command prompt using the following commands.

javac --module-path %PATH_TO_FX% --add-modules javafx.controls JavafxAccordion.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls JavafxAccordion

Output

When we execute the above code, it will generate the following output.