Unobtrusive Collapsible Panel Sample

This page demonstrates how to use the Spry Element Selector to use unobtrusive techniques with the Collapsible Panel widget. The functionality is kept in cp_unobtrusive.js.

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.

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.

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.