current state

This keeps track of the current state of the accordion--which panel is visible.

new state

This is populated by the number corresponding to the header click.

low state

The lower of the current/new states.

high state

The higher of the current/new states.

If I'm on state 1 and I click on state 4, I want the three affected panels to move as a group, not one at a time. Each step checks each of the checkboxes above to see if the corresponding panel is supposed to move, then moves it (or not). It increments the counter field and passes the focus to "check if done." This would have been possible with the advanced interaction editor, but I would have had to build an animation for each panel combination, which would have been much harder.

How this Works

Configuration Notes

If adding additional panels, you'll need to change the OnClick event in the new panel headers to set this field to the correct number.

This is the part that will be the most work if you decide to add additional panels. You'll need to

•  add a checkbox for each new panel

•  change the "Set All True" case to select the new checkboxes

•  change the other cases to turn off the new checkboxes as needed

•  add cases to accommodate new possible low and high values

step count

counter

You should decide on the height of your content area before you configure this. Pick a number with a lot of divisors for maximum flexibility in configuring the animation. You'll need to make this equation balance:

      content height   =   distance per step   x   step count

You set the step count in the field at left. This is the number of frames in the animation. The more frames, the smoother the animation will be, but too many frames can slow it down.

The distance the panel moves in each step is set in the "step up" and "step down" interactions. You'll need to change it for each case.

If you add additional panels, you'll need to add another "move x" case to the "step up" and "step down" interactions to check whether each new panel needs to be moved in this animation.

You don't need to touch this, but the "Not Done" case in this step contains the wait time between steps. Changing this time can speed up or slow down the animation.

These steps are radio buttons that have actions attached to the OnFocus event. To pass control to the next step, the action sets the focus on the next radio button.

This panel is not visible in the prototype. It's sized to 1x1 pixel, and placed behind the upper left corner of the accordion container panel. The two panels are grouped together.

Quick Width Adjustment

The accordion is designed to support widths up to 800 pixels. Move this line to the right edge of the accordion widget, then set the width of the accordion container panel to match. This line gives you a right border.

If you need a width greater than 800 pixels, you will need to adjust all the panels and their contents manually, but doing so will not affect the animation.

Bottom Border

This line provides a bottom border for the accordion widget, even when the bottom panel is moving. It should be placed so it appears at the bottom of the accordion widget as viewed on the page.

The default state of the accordion is assumed to be the first. If a different default is desired, move the panels into the proper position here, then change the number in the "current state" field in the "controls and documentation" panel.

Panels must be arranged 1-n, top to bottom. Each panel must be in front of the one that came before it (1 is in back).

You can delete panels from the end (e.g., start with accordion 7) without breaking the widget. Another approach is to resize the accordion container panel to hide the extra ones at the bottom--then they'll still be there if you need them later.

Adding panels requires a lot more work, but the procedure is documented on the "controls and documentation" page in the accordion controller panel.