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.

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'

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.

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.

This Collapsible Panel is opened and closed with a link.