Transparent accordion background in JavaFX

Question

I'm new to both JavaFX and CSS. I'm using Scene Builder, and have an accordion that I want to use as a menu bar. I want the background of the accordion to either be transparent or to match the background of the page behind it, and the text to be fully opaque and a different color. Also, I do not want the arrows beside the text to appear. I've tried the various options that Scene Builder provides, but none enabled me to do either of these two things. Is this something I'll need to do with CSS, and if so, how?

Answer 1

I solved the issue with css. JavaFX uses a file called caspian.css for its standard styling. An accordion module contains titled panes that consist of a title and a content area. To remove the background color of the content you need to overwrite the styleClass of the titled panes:

.accordion .titled-pane > *.content {
   -fx-background-color: null;
}

You could also assign a custom styleClass to your titled panes or accordion if you don't want to overwrite the style application-wide. Hope this helps.