Spry User Guide - Support - Adobe

Variation on tags used for Collapsible Panel widget structure
In the preceding example, div tags create a nested tag structure for the widget:
Container div
Tab div
Content div
This 2-level, 3-container structure is essential for the Collapsible Panel widget to work properly; the structure,
however, is more important than the actual tags you decide to use. Spry reads the structure (not div tags necessarily)
and builds the widget accordingly. As long as the 2-level, 3-container structure is in place, you can use any blocklevel
element to create the widget:
Container div
H3 tag
P tag
SPRY
User Guide
The div tags in the example are flexible and can contain other block-level elements. A p tag (or any other inline tag),
however, cannot contain other block-level elements, so you cannot use it as a container or panel tag for the collapsible
panel.
CSS code for the Collapsible Panel widget
TheSpryCollapsiblePanel.cssfilecontainstherulesthatstyletheCollapsiblePanelwidget.Youcanedittheserules
tostylethecollapsiblepanel’slookandfeel.ThenamesoftherulesintheCSSfilecorresponddirectlytothenames
of the classes specified in the Collapsible Panel widget’s HTML code.
Note: You can replace style-related class names in the SpryCollapsiblePanel.css file and HTML code with class names of
your own. Doing so does not affect the functionality of the widget, as CSS code is not required for widget functionality.
The default functionality for the behaviors classes at the end of the style sheet are defined in the SpryCollapsiblePanel.js
JavaScript library file. You can change the default functionality by adding properties and values to the
behavior rules in the style sheet.
The following is the CSS code for the SpryCollapsiblePanel.css file:
16