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.
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.
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.
This Collapsible Panel is opened and closed with a link.
And this is a <P> tag .
Spry generally doesn't care what the actual markup is. It only cares that the structure is correct.