Widget Structure
In our example we use an Accordion widget to display additional information about the selected product in the Products table. The structure of the widget is defined by the HTML code.

As you can see, the composition of the widget is quite easy to understand for anybody familiar with HTML. If you want to add or delete a panel, you can simply add or delete the appropriate HTML container in your code.

Widget Behavior
The functionality for the Accordion widget is built into a JavaScript file that understands the HTML structure for the widget. This approach makes it easy for users to modify the look-and-feel of the widget without having to worry about its functionality. As long as the HTML structure is correct, the widget will function as expected. The JavaScript is included using two lines of code.

The first line simply links in the JavaScript file that contains the Accordion functionality.

The second line creates an instance of the Accordion JavaScript object and links it to the HTML by passing in the user-defined ID (Acc1).

Note that the JavaScript to create an instance of a Spry widget must be included under your markup at the bottom of the Web page.

Widget Styling
The Accordion widget is styled just as you would any other HTML element on your page using CSS. The CSS file (SpryAccordion.css) is included using the following line of code:

In the HTML example in Figure 8 you will notice that there are CSS classes applied to each of the relevant block-level elements (Accordion, AccordionPanel, AccordionPanelTab, and AccordionPanelContent). The CSS rules for these classes are defined in the SpryAccordion.css file. They can be changed at will by the Web developer or designer.

Spry Effects
Spry effects are visual enhancements that you can apply to almost any element on an HTML page. For example, an effect might highlight information, create animated transitions, or visually alter a page element for a certain period of time. Effects are a simple but elegant way of enhancing the look-and-feel of your Web site.

The current set of effects (so far) includes:

• Appear/Fade
• Highlight
• Blind Up/Blind Down
• Slide Up/Slide Down
• Grow/Shrink
• Shake
• Squish

• Simple JS Syntax.
• Single JS include.
• Compatible with other effect libs/frameworks.
• Focus on key interaction/UE behaviors.