JavaFX: iTunes-like, expandable and collapsable Panel

Question

I would like to create something like this in JavaFX:

The Panel with the song titles is expanded and collapsed by clicking on the album cover. The other albums are moved down when it's expanded and up again when collapsed.

What would be the most simple way to do this? I thought of using an Accordion, using the images as titles, but I'm not sure if it can be stylized in a way that it looks like this.

Since the icons should be realigned when the window size is increased, I'd like to use a Flow- or Tile Pane for the main layout. Animation would be nice-to-have, but is not absolutely necessary.

I'm grateful for any hint!

Answer 1

I cannot think of a simple way to have the albums in the second row to move down. However, if you want a grid of albums and a pop-over that appears when the user clicks on the album, the ControlsFX library’s GridView and PopOver control may help you. Although the GridView example in the link above shows only images, you can embed a whole scene graph (the image icon of the album, the title label, and the artist name label) in each cell.