Overview

What is an Accordion

An accordion is a group of blocks that can be either displayed or hidden by using some clickable controls. The text blocks, the controls, and just about every feature of Accordion can be configured to make your Accordion behave differently.

Accordion Types

You can stylize your Accordion in many different ways, but there are two primary types of Accordions: Side-Tab style and Above-The-Content style. In the Side-Tab style the controls are placed on the side of the content. However the default is to place the controls for the text blocks right Above-The-Content of text that it will control.

How It Works

Accordions are built like regular web pages using valid xHTML with DIVs and CSS. There are no frames, no Java applications, and there is no embedded Flash. Instead, Accordion uses a very lightweight Javascript library called moo.fx. Why should you care? Because by using simple standards that the web understands, like Javascript and xHTML, your page will load quickly, work well in all the major browsers, and be completely indexed by Google and the other search engines.

Installation

To install the Accordion plugin:

Download Accordion from our website.
Double click the Accordion.stack file.
If RapidWeaver is running, restart.

Accordion is now installed ready to use.

Getting Started

To get started, you should have an Accordion page in a RapidWeaver file already created. If you don't have an Accordion page already, create one by choosing Add Page in RapidWeaver and selecting Accordion.

Building an Accordion

Adding an Accordion page

Open RapidWeaver and click the + button in the lower left corner of the RapidWeaver window. A sheet will drop down containing all the available page types. Choose Accordion from the list and click the Add button. This will add an Accordion page to your site and display the Accordion edit view.

Adding Content

Click on the + button, it's located below the lower left corner of the Accordion content list. A new accordion title called "No Title" will be added to the list. In the Title field below the Accordion content list enter a title. In the text area below the title field, enter you title. You can use formating to format your title and drop pictures in as well.

Organizing Content

After you have a few accordion entries added to your list you may find that you need to change their order. Just drag and drop the titles within the list. The Accordion will be built in the order that the content is listed.

Adding/Removing Links

The Add Link and Remove Link buttons can be used to edit the links in your content. Select some text in the text area then choose Add Link. The standard RapidWeaver link panel lets you specify the link.

To remove a link, select the image or text with the link, then click Remove Link.

Removing Content

Select the item that you'd like to remove. Click the minus button. Poof it's gone! Be careful this operation is not undoable.

Titles

Style

Text Style

Clicking in the Text Style checkbox allows Accordion to override the text styles provided by your theme. You can choose a new color for the text as well as a new size.

Border

Clicking in the Border checkbox allows Accordion to override the border style provided by your theme. You can set the Color and the width of each side where the border should appear. The Highlight color will be used for the currently selected item of your accordion. If you want the currently selected item to be the same as the other items, just choose the same color.

Background

Clicking in the Background checkbox allows Accordion to override the background style provided by your theme. You can set the background color to any color you like. If you would like the background color to be the same as the other portions of your page, just uncheck the Background box, the default for most themes will be to inherit a transparent background from the page.
You can set the Highlight color of the background as well. This will be the background color that is shown on the currently open item. If you want the currently selected item to be the same as the other items, just choose the same color.

Structure

Size

Margin

The margin attribute adds space OUTSIDE the border. In other words, it adds whitespace. You can add margin around any side of your block. It is quite likely that there are default margins from your theme. So if you would like zero margin around your title blocks you should probably override the theme by clicking in the Margin checkbox and setting all the values to zero.

Padding

The padding attribute adds space INSDIE the border. This does not actually make more space for the title, but instead will make the distance between the title and the border increase. You can add padding around any side of your block. It is quite likely that there is default padding from your theme. So if you would like zero padding around your title blocks you should probably override the theme by click in the Padding checkbox and set all the values to zero.

Image

Background Image

You can drag and drop many types of image into the Background Image box. They will be converted to a web compatible format based on the Image Format setting RapidWeaver Page Inspector window under the Info tab. You can delete the image by clicking on it then pressing the delete or backspace key on your keyboard.

Selected Image

The selected image will replace the background image of the currently selected title. You can use this to create the affect of highlighting the selected item. If you leave the image area empty, then the selected image will be the same as the background image. You can delete the image by clicking on it then pressing the delete or backspace key on your keyboard.

Image Offset

In most cases you will probably want the background image to have the same dimensions as the Size setting (see above). In some cases, however, you may want only a small image placed near the title text. If that's the case you can position the image within the title block by setting the Image Offset values. Offset values can be either positive or negative, however positioning your image outside the bounds of your block can have a negative effect on your compatibility with some browsers.

Effects

Alignment

The alignment of titles is controlled by your theme, the alignment of the content is controlled by the formatting menu. But the alignment of the entire accordion within your page is controlled here. In many cases have some whitespace between the edge of the Accordion and the edge of your page improves readability. To achieve this create a smaller accordion using the Size settings (see above) and then choose Center from the Alignment popup menu.

Title

Changing from a Side-Tab style Accordion to a standard Titles-Above-Content style Accordion is done with this setting. If you would like a Side-Tab style accordion, choose the Title Position to be either Left or Right from the menu. Choosing Above Content will build the standard Titles-Above-Content style Accordion.

Duration

The duration is how long the change from one title to the next will take, as measured in milliseconds. 300, or about a third of a second produces a visible but not too distracting swoosh between titles. Under about 100 the swoosh becomes a flash. Under 10 the browser is probably not capable of rendering any animation between the two titles. It will simple jump to the next one. For a super-slow-mo appearance try setting the value to 2000 -- but be careful, making your web viewers wait can also encourage them to leave your site. It might be fun to watch the first time, but if your viewers are visiting your site for the content, then they'll get tired of waiting quickly.

Additional Options

Hover

Selecting the checkbox "Hover to open." will produce an accordion where users need only hover over the title for it to expand.

Toggle

Selecting the checkbox titled "Clicking on an open title closes it." will produce an accordion that can be opened and closed at will.

Start Position

In some cases you may want your Accordion to start fully closed and let the viewer open it only when they need the information. Selecting the checkbox titled "All items start out closed." enables this feature.

Effect

Selecting the checkbox titled "Show effect when page loads." will ZZZZZZZZ.

Content

Style

Clicking in the Text Style checkbox allows Accordion to override the text styles provided by your theme. You can choose a new color for the text as well as a new size. These attributes will override your theme, but even these will be overridden by the formating that you place on your text.