Issue
Is it possible to have an accordion with more then 1 open pane in JavaFX?
Solution
No, a JavaFX 2.2 Accordion can only have one open pane at a time.
I created an enhancement request (JDK-8090554 StackedTitledPanes control) for a feature which allows you to open more than one pane in the accordion at a time, however the feature request has currently not been implemented.
In the meantime, you can construct a similar control yourself quite easily by creating multiple TitledPane instances and placing these in a VBox.
private VBox createStackedTitledPanes() {
final VBox stackedTitledPanes = new VBox();
stackedTitledPanes.getChildren().setAll(
new TitledPane("Pane 1", contentNode1),
new TitledPane("Pane 2", contentNode2),
new TitledPane("Pane 3", contentNode3)
);
((TitledPane) stackedTitledPanes.getChildren().get(0)).setExpanded(true);
return stackedTitledPanes;
}
If necessary, you can wrap the VBox
containing your panes in a ScrollPane, so that the contents of all of your expanded panes can be usable if their area overflows the available area.
I created a sample solution (icons are linkware from: http://www.fasticon.com).
Update
Modernized and inlined the previously externally linked example solution for a scrollable stack of TitledPanes.
Also, note that in a modern JavaFX environment the default styling is a bit different (fewer gradients in by default in things like the TitledPane content background), so it will look slightly different than the prior image in this answer, but otherwise behavior is similar.
import javafx.application.Application;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.image.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class StackedPanes extends Application {
// image license: linkware - backlink to http://www.fasticon.com
private static final Image BLUE_FISH = new Image("http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Blue-Fish-icon.png");
private static final Image RED_FISH = new Image("http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Red-Fish-icon.png");
private static final Image YELLOW_FISH = new Image("http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Yellow-Fish-icon.png");
private static final Image GREEN_FISH = new Image("http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Green-Fish-icon.png");
@Override
public void start(Stage stage) {
VBox stackedTitledPanes = createStackedTitledPanes();
ScrollPane scroll = new ScrollPane(stackedTitledPanes);
scroll.setFitToWidth(true);
scroll.setFitToHeight(true);
scroll.setPrefWidth(410);
scroll.setStyle("-fx-base: cadetblue;");
stage.setTitle("Fishy, fishy");
Scene scene = new Scene(scroll);
stage.setScene(scene);
stage.show();
}
private VBox createStackedTitledPanes() {
final VBox stackedTitledPanes = new VBox();
stackedTitledPanes.getChildren().setAll(
createTitledPane("One Fish", GREEN_FISH),
createTitledPane("Two Fish", YELLOW_FISH, GREEN_FISH),
createTitledPane("Red Fish", RED_FISH),
createTitledPane("Blue Fish", BLUE_FISH)
);
((TitledPane) stackedTitledPanes.getChildren().get(0)).setExpanded(true);
return stackedTitledPanes;
}
public TitledPane createTitledPane(String title, Image... images) {
FlowPane content = new FlowPane();
for (Image image : images) {
ImageView imageView = new ImageView(image);
content.getChildren().add(imageView);
FlowPane.setMargin(imageView, new Insets(10));
}
content.setAlignment(Pos.TOP_CENTER);
TitledPane pane = new TitledPane(title, content);
pane.setExpanded(false);
return pane;
}
public static void main(String[] args) {
Application.launch(args);
}
}
Answered By - jewelsea
Answer Checked By - Gilberto Lyons (JavaFixing Admin)