Accordion Control?

Any plans (or a custom control available) for a smooth accordion control, similar to what you see in MS’s Outlook or on the Apple website?

Thank you.


What is an accordion control ?

Consider a rectangular panel (typically vertical) with X “sections”. Each section has a list of icons/functionality that appear when in focus and/or clicked on. Contrary, when the others “sections” are out of focus, they and their functionality shrink down, like an accordion.

Another example, for those who may not use outlook (heck, I don’t even), would be similar to what you see via HTML/JS/etc. on Apple’s support site:

Look at the the way they handle the “Latest In Support” sidebar on the right. In this example, the according expands/contracts upon hover-- but it’s the same idea.

If this is called something else, then I apologize-- I’ve always called it an accordion control.

I would just love to see this in JUCE, or at least get a head start on where to start to produce it myself.

Thanks for the response.

-weenie + 1

Ah, one of those things - I’d never heard them called accordian controls, but it’s not a bad name. Or “inflatables”, perhaps?

It’s certainly something that’d be nice to have, I’ll do one if I get chance!

Day off? Well, why not take a break from the day-to-day coding task and help out!

This will likely want a bit of tweaking but it’s a start.
Here’s a (win32) demo, and here’s the source.

Hopefully I’ll comment it when I can be bothered, but it’s quite likely I’ll forget or not have time.

It should be reasonably straightforward to understand what’s going on though. Just create a MiniWindowList and add MiniWindow-wrapped components to it. setSingleOpenWindowMode lets you specify whether or not only one window can be open at a time.

It may be buggy, it may be rubbish, but it’s a starting point.
Things to consider implementing:

  • Rearranging of window order
  • Dock mode - tear windows off to become floating windows; this would require a MiniWindowContainer to be implemented with a resizable border to hold it, allowing only one window.


The MiniWindowArrangement component is separate from the Container component to make it easier to have a viewport as an option; e.g. in the ‘floating window’ scenario it won’t want a viewport, but in the list version it will. If you’re subclassing MiniWindowContainer make sure you call setArrangementComponent in the constructor so it knows where to put the windows.

The windows have a minimum ‘size’ (and not just height) for the potential floating-window feature. Just give it a dummy width value for now.

A bunch of stuff in the window content component sizing stuff is probably quite easy to break, so don’t be alarmed if you screw it up slightly by tinkering - it’s most likely because I did something in a weird way.

If i find time i’ll see about improving it, but it’d be ace if someone else took the ball!

oh, and here’s a quick screenshot…

[edit] stupid links!

I tried it out, that’s pretty slick.

I wrote one a few years ago using mfc, what a pain in the ass, and I didn’t have the nice smooth animation. I hope I never have to go back to mfc.

Nice job haydxn. Could it be altered to allow multiple things to be open at once?

yeah, there’s a function i pointed out in my post (setSingleOpenWindowMode) - call it with false and the windows don’t close automatically.

i was going to put a button on the demo to demonstrate it but i couldn’t be bothered!

Nice, and thanks! This will be a great start!