Accordion

Accordion in JavaFX is a container that holds multiple TitledPane objects. Only one TitledPane is usually expanded at a time.

It is useful when you want to organize a lot of information into sections, such as settings categories, menus, or FAQs.

Example:

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 {

    @Override
    public void start(Stage stage) {

        // Content for the first section
        VBox profileContent = new VBox(10);
        profileContent.getChildren().addAll(
                new Label("Name: YourName"),
                new Label("Age: 26")
        );

        // First titled pane
        TitledPane profilePane = new TitledPane("Profile", profileContent);

        // Content for the second section
        VBox settingsContent = new VBox(10);
        settingsContent.getChildren().addAll(
                new Label("Dark Mode: Enabled"),
                new Label("Language: English")
        );

        // Second titled pane
        TitledPane settingsPane = new TitledPane("Settings", settingsContent);

        // Create the accordion and add the panes
        Accordion accordion = new Accordion();
        accordion.getPanes().addAll(profilePane, settingsPane);

        // Optional: open one pane by default
        accordion.setExpandedPane(profilePane);

        Scene scene = new Scene(accordion, 300, 200);

        stage.setTitle("Accordion Example");
        stage.setScene(scene);
        stage.show();
    }

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

Explanation:

• Accordion accordion = new Accordion(); Creates the accordion container.

• TitledPane Each section inside the accordion must be a TitledPane.

• new TitledPane("Profile", profileContent) The first argument is the title shown in the bar. The second argument is the content shown when the pane expands.

• accordion.getPanes().addAll(...) Adds the sections to the accordion.

• accordion.setExpandedPane(profilePane) Makes the "Profile" section open when the application starts.

You can also create it in FXML:

<Accordion>
    <panes>
        <TitledPane text="Profile">
            <content>
                <VBox spacing="10">
                    <children>
                        <Label text="Name: Ahmed"/>
                        <Label text="Age: 26"/>
                    </children>
                </VBox>
            </content>
        </TitledPane>

        <TitledPane text="Settings">
            <content>
                <VBox spacing="10">
                    <children>
                        <Label text="Dark Mode: Enabled"/>
                        <Label text="Language: English"/>
                    </children>
                </VBox>
            </content>
        </TitledPane>
    </panes>
</Accordion>

Common methods:

accordion.getExpandedPane();       // Get the currently open pane
accordion.setExpandedPane(pane);   // Open a specific pane
accordion.getPanes();              // Get all panes

Example of detecting when the user opens a pane(check the console in the IDE):

package org.example.testingtoturials;

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

public class ProfilePaneExample extends Application {

    @Override
    public void start(Stage stage) {

        // Content inside the pane
        Label content = new Label("User Profile Content");

        // Create TitledPane
        TitledPane profilePane = new TitledPane("Profile", content);

        // Listener (your code 👇)
        profilePane.expandedProperty().addListener((obs, oldValue, newValue) -> {
            if (newValue) {
                System.out.println("Profile pane opened");
            } else {
                System.out.println("Profile pane closed");
            }
        });

        // Layout
        VBox root = new VBox(10, profilePane);

        // Scene
        Scene scene = new Scene(root, 300, 200);

        stage.setTitle("TitledPane Example");
        stage.setScene(scene);
        stage.show();
    }

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