CollapsibleContainer Demo

What Is It

The CollapsibleContainer is a JPanel that can present labeled components that are collapsible.

How To Use It

This demo is set up using code that resembles:

CollapsibleContainer container = new CollapsibleContainer();
container.addSection("Section 1", label, 0);
container.addSection("Section 2", new JScrollPane(textPane2), 1);
container.addSection("Section 3", new JScrollPane(textPane3), 2);

All sections are collapsible by default, but you can toggle that off by calling:

Section section1 = container.addSection("Section 1", label, 0);
container.getHeader(section1).putClientProperty(CollapsibleContainer.PROPERTY_COLLAPSIBLE, Boolean.FALSE);

Also in this demo you can right-click the section headers to toggle the "Collapsible" property.

How It Works

The headers are all JButtons with animating vector icons. This should help screen readers navigate this component; although I haven't invested time (yet?) in helping screen readers identify AccessibleStates like EXPANDED, EXPANDABLE, and COLLAPSED.

When scrollpanes are added as sections they preserve their existing rectangular border. If a tree or list is added they are given a single-pixel rectangular border. All other components are put inside a box UI to group controls together.

The actual animation is handled by a private internal LayoutManager: a CollapsibleLayout.

Discussion

This basic idea is also known as an accordion, or it might be called a disclosure control, or a progressive disclosure control.

This component is a great alternative to tabs when you have too many UI controls to squeeze into a given space.

As of this writing I've used this for some developer tools, but I haven't deployed it in any customer-facing applications. This component shows potential, but there are areas for improvement such as: