Accordion 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.

Accordion Basics

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.

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.

Toolbar

The Accordion toolbar gives you quick access to the things you'll do the most in Accordion: creating new blocks, adding links, and changing their style.

Add/Remove Link

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.

Buy Now

When you are ready to purchase Accordion, click the Buy Now button. If the Buy Now button is not visible, then either you need to update to the latest version or you have already bought and registered Accordion.
Once you've registered Accordion, the Buy Now button will disappear.

Fonts

The Fonts button brings up the standard Mac OS X font palette. You can use the font palette to change the text in your Accordion content.
Note: It is safest to use fonts from the Web collection of the font palette. Fonts outside of the Web collection may not be available on all browsers and may cause your page to look odd when viewed on other computers.

Colors

The Colors button brings up the standard Mac OS X color palette. The color palette is used for many purposes, such as setting background colors, border colors, and the color of text. To change the color of your text, select the text, open the color palette by clicking the Colors button, then choose a new color.

Title 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.

Text CSS Tag

If you are interested in precisely controlling the Cascading Style Sheets of your Accordion, you can assign a specific CSS class and tag to be used. This is a power user feature. The default is to leave the Text CSS Tag checkbox unchecked. This will set the Class to acToggle and the tag to H3.

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.

Title Structure

Size

Clicking in the Size checkbox allows Accordion to override the size attribute of your theme. It's actually quite unlikely that your theme has a size attribute set on all blocks, so setting a size for your title blocks is the default for Accordion.

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.

Title 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.

Title 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 Position

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.

Click to Toggle

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

Start Closed

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

Content 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. These attributes will override your theme, but even these will be overridden by the formating that you place on your text.

Text CSS Tag

If you are interested in precisely controlling the Cascading Style Sheets of your Accordion, you can assign a specific CSS class to be used. This is a power user feature. The default is to leave the Text CSS Tag checkbox unchecked. With the Text CSS Tag uncheck the class will be set to acStretch. The text is always placed into a DIV block within the acStretch block.

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.

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.

Content Structure

Size

Clicking in the Size checkbox allows Accordion to override the size attribute of your theme. It's actually quite unlikely that your theme has a size attribute set on all blocks, so setting a size for your content blocks is the default for Accordion. The height is noticeably absent from this setting. This is because the height of the content area will stretch to fit the content that you've placed within it.

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 content 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 content, but instead will make the distance between the content 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 content blocks you should probably override the theme by clicking in the Padding checkbox and setting all the values to zero.

Content 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.

Image Offset

You can position the image within the content 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.