Spry Tabbed panel

With the “Spry Tabbed Panel” button, we can create a window that has several tabs.
To create a panel with tabs, first place your cursor in your document and then click the “Spry Tabbed Panels”.
Again we get a warning window showing that the files needed for this object (the Spry tabbed pane) will be created and copied to the sitemap.
Click the OK button.

In the CSS Styles panel, we can apply the different styles to the default styles, by selecting them int the top half and adjusting in the lower half.

To add tabs, click the plus sign in the properties window and to delete tabs, select the tab in the window and click the minus sign.

To reposition a tab, highlight it in the list and click the downward or upward pointing arrows.

You can change the text of the tab by double-clicking in the tab itself.
Adding or editing data to a tab is done in the same way as adding or editing data in a page.
First, select the tab by placing the mouse pointer over the title bar of the tab. When an eye icon appears, click this icon and add the data. (Text, images, tables, no matter what).

Spry Accordion

A Spry accordion object is a set of collapsible panels that store a lot of content in a limited space.
Like the “Spry tabbed panel”, the accordion panels can also contain a number of panels.

To add a “Spry Accordion” widget, first place your cursor in your document and then click the “Spry accordion”.
Again we get a warning window saying that the files needed for this object (the Spry accordion object) will be created and copied to the sitemap.

Click the OK button.

In the CSS Styles panel, we can apply the different styles to the default styles, by selecting them int the top half and adjusting in the lower half.

To add panels, click the plus sign in the properties window and to remove panels, select the panel in the window and click the minus sign.

To reposition a panel, select it in the list and click the downward or upward pointing arrows.

You can change the title of the panel by selecting it and then changing it.
Adding or editing data to a tab is done in the same way as adding or editing data in a page.
First, select the tab by placing the mouse pointer over the title bar of the tab. When an eye icon appears, click this icon and add the data.

Spry Collapsible panel

A collapsible panel is a panel that stores data in a limited space.
By clicking on the tab of the object, users can hide or display the content in the collapsible panel.
The following example shows a Collapsible Panel, folded and unfolded.

To add a “Spry Collapsible panel”, similar to all other objects in the previous Spry objects, just click the “Spry Collapsible panel” button.

If you wish to modify the contents of the “Collapsible Panel” widget, then choose the “Display” box option to “Open”, which will unfold the panel where you can select text or insert text.

With the settings in “Default Status” box, we determine the default state (open or closed) for the “collapsible panel” object when the Web page is opened in a browser.
When the “Enable animation” box is selected, the panel opens and closes gradually and in a smooth movement, when the visitor clicks on the panel tab. When this is off, the panel opens and closes abruptly.

Whatever may stand under the collapsible panel, be it a picture, table or whatever, when the collapsible panel is opened, it will shift the data downward.

May be another tip:
If you wish to change the width of any Spry object, select the top line of the panel “All rules” and add the attribute “width” and enter the width in pixels.

Featured Courses

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats