Standard Collapsible Panel

Default CSS class .CollapsiblePanel width set to 300px. Since all Panels on this page use the same CSS, it affects all Panels on the page.

Custom classes can be used to customize individual Panels.


Collapsible Panel with options set

Options have been set in this example.

Default state has been set to closed. It will be closed on load.
Constructor Option: 'contentIsOpen:false'

Animation has been turned off, so panel will snap open and shut.
Constructor Option: 'enableAnimation:false'


Keyboard Navigation Enabled

By putting a tabindex="0" on the Tab tag, keyboard navigation is enabled. Notice that the CollapsiblePanelFocused class now functions.

The default navigation keys are Up/Down arrows, but you can specify any keys for navigation.

When the tab has focus, the Space Bar or Enter key will open and close the Content Panel.

Keyboard Navigation can also be set by wrapping the Tab text with an <a> tag. This is demonstrated on the panel below.

Keyboard Navigation using non-default keys

By adding the following options: openPanelKeyCode and closePanelKeyCode you can change the default values for navigation keys.

The panels for this collapsible panel are open/closed by pressing PageUP/PageDown keys.


Open Panel | Close Panel

Open Panel with Link

This Collapsible Panel is opened and closed with a link.


Alternate Markup - This is an <H2> tag

And this is a <P> tag .
Spry generally doesn't care what the actual markup is. It only cares that the structure is correct.