Accordion Magic 4 (APM4) User Guide

Overview

Accordion Panel Magic 4 is the next iteration of the first Accordion Panel widget ever made for Dreamweaver. It's also the most powerful and feature-rich accordion widget there is. We've modernized the code, re-engineered the structure, and the result is amazing.

New Features

Scroll to Trigger

This usability option (turned on by default) causes the entire Accordion to scroll up smoothly, so that the trigger you have clicked (or tapped) is near the top of the viewport.

User Class

You can now set a custom CSS class for each Trigger, each content panel, or the entire (root) Accordion.

Flexbox Columns

When adding a new content panel, you can choose a single or multi-column configuration. Multiple columns use the modern CSS Flexbox specification. Older browsers are automatically detected and a workaround employed to revert to floated columns.

Trigger Styling Options

Triggers can now be optioned to include borders, rounded corners, vertical spacing, and CSS animations.

Panel Styling Options

Content panels can optionally be set to display borders.

General Styling

The CSS that styles APM has been totally revised and uses modern techniques that are both innovative and mobile-friendly.

Installing Accordion Panel Magic 4

Extension installer files come in 2 formats: MXP and ZXP. MXPs are supported by Extension Manager versions MX, MX2004, 8, CS3, CS4, CS5, CS5.5 and CS6. ZXP is supported by versions CS5.5 and higher, including Creative Cloud versions. To install, open the relevant Extension Manager, click the Install icon or link, and then browse to where you unzipped the installer file.

Relevant Extension Managers

For Dreamweaver MX, MX 2004, CS3, CS4, CS5, CS5.5, and CS6, use the Macromedia or Adobe Extension Manager that automatically installed with Dreamweaver.

For Creative Cloud versions, use the free PVII Extension Manager for Adobe Creative Cloud:

PVII Extension Manager for Adobe CC
( Windows and Mac)

Accessing Accordion Panel Magic 4

There are 3 ways to access Accordion Panel Magic 4. Choose the one most suitable to your workflow. When you open an interface, the system will detect the appropriate mode (Insert or Modify).

When you are Creating a new APM4 instance, place your cursor on your page where you want to build your widget. If Modifying an existing APM4 instance, or if you want to nest a new accordion inside an existing one, place your cursor anywhere inside the existing widget and use one of the 3 methods below to open the UI. The system will always open in the correct mode.

1. Insert Bar

Switch to the PVII category. Accordion Panel Magic 4 is the last one in the screen capture below

2. Insert Panel

Switch to the PVII category. Accordion Panel Magic 4 is the last one in the screen capture below

3. Insert Menu

Choose Insert > Studio VII > Accordion Panel Magic 4 by PVII

If your cursor is not inside another Accordion instance, the main APM4 UI will open.

Editing or Nesting

If your cursor is inside an existing Accordion instance, an intermediary UI will open, asking if you'd like to modify (edit) the existing accordion or nest a new one inside.

Converting Accordions Made with Previous Versions

Simply place your cursor inside your existing accordion and open the APM4 interface.

The Convert UI will open...

To convert your existing APM widget, click the Convert to APM4 button.

The main interface will come into focus.

Set your options and click OK to finalize the conversion.

Browser Support

APM4 uses the concept of progressive enhancement to build a widget that will be accessible in all browsers. Your visitors and clients will never have a problem.

Accordion Panel Magic 4 Interface: Options & Settings

The Accordion Panel Magic 4 interface makes customizing your widget easy!

The APM4 Interface

Creating a new APM4 instance

The APM4 UI allows you to easily define and configure APM4 instances, one at a time, and once configured, the UI can be used to modify (edit) each instance as often as you like. Follow the steps below to create a new APM4 instance:

Position your cursor where you would like your widget to be created

Open the APM4 UI, as described above.

Note: When creating a new widget make sure your insertion point is outside of any existing APM4 instance.

Panels and Triggers: Options and Settings

Configure your widget's triggers and panels

Panel Heading Command Buttons

Add Panel

Adds a new panel heading to the Panel Headings listing.

Delete Panel

Deletes the selected panel heading.

Up

Moves the selected panel heading up in the listing.

Down

Moves the selected panel heading down in the listing.

Heading Text Options

The Heading Text options section is five lies long and contains various options and setting that can be applied to your panel headings.

Heading text entry box

Enter or edit the heading text for the selected panel heading.

Link Only - No Associated Content Panel

Enabling this option makes the selected panel heading act as a simple hyperlink. There will be no content panel and the panel heading will display with a unique bullet icon. Use this option when you want the selected panel heading to simply link to another page.

Trigger User Class

You can assign an optional User Class to the selected panel heading. For example, if you want a particular heading to be red, assign the class trigger-red. There is one rule you must follow when naming your user class: it must never contain the text string ap4 in any part of its name.

Create a corresponding CSS rule in your APM4 theme CSS file (p7AP4-01.css-p7AP4-04.css) using the following syntax:

a.p7AP4-01.trigger-red {
background-color: red;
color: white;
}

Note: The selector name prefix .p7AP4-01 is necessary to establish the same specificity as the default panel heading trigger CSS rules.

Link Path

If you choose the Link Only - No Associated Content Panel option, this would be where you would enter the page address you wish to link to. If the linked page is in your local site, you can use the Browse... button to locate it quickly.

Trigger Image

Although we do not recommend using images for triggers in a responsive design (because the images could scale down to an extremely small size on a phone) we understand that certain projects or clients might demand it. Use the Trigger Image box to enter or browse to an image. The image will be used in place of Heading Text. You can also add ALT Text.

Trigger images also support rollover and open-state images. To use this feature, your images must adhere to our naming convention:

  • Normal Image: myButton.png
  • Rollover Image: myButton_over.png
  • Trigger Open Image: myButton_down.png

You need only browse to and select the normal image. The state management is automatically handled by the APM4 system. If it detects myButton_over.png and/or myButton_down.png in the same folder as you normal image, it will use them.

Content Layout

When adding a new panel you can choose a content format:

  • Default (Single-Column)
  • 2 Columns 50/50
  • 2 Column-Sidebar Left
  • 2 Column-Sidebar Right
  • 3 Column 33/33/33
  • 3 Column-Wide Middle
  • 4 Column 25/25/25/25

Note: This option is available ONLY for newly created panels, it will unavailable (grayed out) for existing panels. If you want to change the format of an existing panel, create a new one below it. Then copy the content from the existing one into the new one. When you are done, open the the interface again and delete the old panel.

Content User Class

You can assign an optional User Class to the selected heading's content panel. For example, if you want a particular panel to be blue, assign the class panel-blue. There is one rule you must follow when naming your user class: it must never contain the text string ap4 in any part of its name. Write a corresponding CSS rule, using the following syntax:

.p7AP4content.p7AP4-col-wrapper.p7AP4content.panel-blue {
background-color: blue;
color: white;
}

Global Options and Settings

The following screen capture shows the global options in their default configuration.

Global options are options that pertain to the entire widget: how it looks and how it behaves.

Trigger Actions

Show One Panel at a Time (default)

This option is on by default and will cause any open panel to automatically close when a new panel is opened.

Always Keep One Panel Open

This setting will ensure that your Accordion Panel will never be completely closed.

Enable Page Scroll to Trigger (default)

This usability feature is on by default. When you open a panel, the entire widget will smoothly scroll up so that the current trigger is near the top of the page. This prevents your visitors (or clients) from losing place or becoming disoriented, and is especially useful when your panels contain large amounts of content.

Top Offset Amount

The distance from the top of your viewport to the triggered accordion trigger when Page Scroll to Trigger comes to rest.

Enable Mouse Over Open Action

Check this box to allow mouse-over activation of the panel headings.

Enable Mouse Out Close Action

Closes the open panel when your mouse leaves its associated trigger.

Responsive

Enable Responsive Mode

When you enable Responsive Mode, the APM4 system will display a toggle icon (hamburger) above it when viewed on a smartphone—or in a conventional browser window when its width is less than 700 pixels. The toggle icon permits users to completely hide the widget so that they can view more of the page content.

Start With Closed Toolbar

Set this option if you want the default state of your APM4 system, when viewed on a smartphone, to be closed. Users will be able to control the visibility of the system by clicking the toggle icon or text links.

Show Toggle Text

Enable this option to also show a text label (Show Menu or Hide Menu) next to the toggle icon in the toolbar. The actual text content for these labels can be modified in the Smartphone Menu Media Query section of the APM4 style sheet.

Page Load

You can configure how APM4 sets up when the page first loads into the browser.

Open With All Panels Closed

The Accordion Panel will start out with all panels closed.

Open a Specific Panel

You can select a specific panel to open when the Accordion Panel initializes.

Panel Number

If you turn on Open a Specific Panel, enter the number of the panel you wish to be open on startup.

Disable Scroll to Trigger on Load (default)

This option prevent your accordion to scroll its triggers to the top of the page when your page first loads. It does not affect trigger scrolling when you click or tap the triggers.

Open a Random Panel

Select this option if you wish to have the system randomly select a panel to open. Each time the page loads a random panel will be selected.

Open All Panels

Select this option if you want all panels open when the page loads.

Rotator

Auto Rotate Panels on Startup

Check this box if you want to have the panel rotator start automatically when the page first loads.

Cycles

The system will display all of the panels in succession once—or you can set it to loop any number of times. Enter the number of times you want the system to loop through the rotation. To have the Rotator loop indefinitely enter a very high number, such as 9999.

Delay

This controls the amount of time each panel is displayed during the rotation, in milliseconds. The default is 5000ms (5 seconds).

Current Marking

These settings control the operation of the included automatic Current Marking system.

Enable Current Marking

Check this box to enable automatic current marking (highlighting) of links in your APM4 widget. The system looks for links in the widget's panels that match the current page address. When a matching link is found, it's highlighted and the associated panel is set to be the currently active one. The system assigns a special style class named current_ mark to this link and also to its associated Trigger Link. This provides a visual "you are here" indicator.

Open Panel When Marked

Check this box if you wish to have the panel associated with the current-marked panel open automatically when the page loads. Uncheck this box if you wish to have the current-marked panel remain closed.

Include URL Parameters in Match

This option controls whether the automatic current-marking feature will include any URL parameters in the page address when looking for a matching link in the widget. Check this box if you wish to have your URL parameters included in the match criteria.

Image Swap Options

The system supports using images for any of the Trigger links and is designed to automatically handle pre-loading, swapping, maintaining states, and assigning a current-marker. This automation requires that you follow an image file name convention. The system supports up to 3 different image states. Select the Swap Option that you would like to use.

Rollover Open State

This controls the swap action when the trigger link is in its open state. The system will swap to the over image if the trigger link is in the open state and you have a 3-state swap option set. Uncheck the box if you want to disable this swap action.

Animation

You can choose from 3 animation methods or animation can be turned off.

Animation List

The Animation List

Duration

This option allows you to control the animation speed. Duration defines the total amount of time that the animation will run, in milliseconds, regardless of a content panel's dimensions. The default 250 is fine in most cases. Lower the Duration setting and the animation will be faster. Raise the setting to make the animation slower.

Style Theme

APM4 comes with 4 style themes. Choose the theme that best approximates the look you desire. You can later make edits to the style sheet to fully customize your widgets. You can change to a different style theme at any time without affecting the content inside the widget.

Style Themes

Panel Border (default)

Assigns an attractive border around your content panels. The border colors are tied to your selected Style Theme.

Root User Class

You can assign an optional User Class to the entire accordion panel widget. For example, if you want to assign a black matting effect, assign the class matte-black. There is one rule you must follow when naming your user class: it must never contain the text string ap4 in any part of its name. Write a corresponding CSS rule, using the following syntax:

.p7AP4.matte-black {
background-color: black;
padding: 10px;
}

If your triggers are set to have rounded corners, you can add a border-radius to the custom root class:

.p7AP4.matte-black {
background-color: black;
padding: 10px;
border-radius: 5px;
}

Trigger Styling

These options allow you to set styling and effects for your triggers. Choose from:

  • Border
  • Rounded corners
  • Spacing (vertical whitespace)
  • Animate

Command Buttons

There are three buttons along the right edge of the UI:

  • OK
  • Cancel
  • Help

Click OK to finalize your UI session and write the code to your page. Click Cancel to abort the session.

Removing an Accordion

When you are modifying (editing) an existing accordion, a fourth button (Remove) will appear:

  • OK
  • Remove
  • Cancel
  • Help

Clicking the Remove button will completely remove the accordion widget you are editing. If it is the only accordion widget on your page, the CSS and script links will also be removed.

URL Parameters and Control Functions

Control Behaviors

  • Select a text link or image link on your page to act as the behavior trigger
  • Open your Dreamweaver Behaviors Panel (Shift + F4)
  • Click the plus sign (+) on the Behavior Panel
  • Choose Studio VII >Accordion Panel Magic 4> Slide Out Panel Control Actions to open the interface.

Select the type of behavior you wish to apply:

Open/Close All - The Open All/Close All behavior allows you to set links anywhere on your page that remotely Open or Close all panels in any Accordion Panel 4 widget on your page. The behavior can be set to act on a single Accordion widget or on all widgets on your page.

Auto Panel Rotator - The Rotator behavior allows you to display each of your widget's panels in slide show fashion. Each panel will be displayed sequentially with a timed pause (that you can adjust) between panels. The rotation can be limited to one cycle of panels or can be set to loop multiple times.

Trigger Panel - The Trigger Panel behavior allows you to set a link anywhere on your page to remotely operate a panel heading in any APM4 widget on your page. The behavior can be used to Open, Close or Trigger. The Trigger action will open your panel if it's closed and, if options permit, close it if it is open.

The appropriate interface will open. In this case, we've opened the Trigger Panel UI:

Choose an Accordion Panel Trigger and an Action

Click OK to apply the behavior.

You can assign Behaviors to the menu items in PVII menus, but you'll need to change the behavior event from the default onclick to onmousedown.

Since default trigger events are always click/tap, links that you assign a control behavior to will always be null. If you use a hash value (#), makes sure to apply a return false. With a return false assigned, the link would look like this:

<a href="#" onClick="P7_AP4control('p7AP4t1_2','open');return false">

URL Parameters

An opener detection system is included that allows you to set up links with special parameters that will load a page and also open a specific accordion panel on that page. The opener will look for a specific ID referencing the widget.

There are 2 methods available:

1. Anchor Method

The system will look for #ap4 plus a reference after the anchor.

The anchor index.htm#ap41_1 will open the first panel in the first Accordion widget on the page. The anchor index.htm#ap42_6 will open the sixth panel in the second Accordion widget on the page.

2. URL Parameter Method

An opener detection system is included that allows you to set up links with special parameters that will load a page and also trigger a specific panel in an APM4 widget on that page. The opener will look for the APM4 widget number, an underscore, and the APM4 content panel number. There are 2 methods available:

  • Anchor Method: The system will look for "#ap4" plus a panel reference after the anchor. The anchor index.htm#ap41_4 will trigger panel 4 in the first APM4 Widget on the page.
  • URL Parameter Method: The system will look for "ap4=" in the URL parameter. The URL parameter index.htm?ap4=2_4 will trigger panel 4 in the second APM4 Widget on the page. You can then give out the link so people can go directly to your specific content panel.

Note: This feature is meant to be used on links to your page from external locations ONLY. They are not meant to be used on links that are in your page. To control accordion panels from links on the same page, use the APM4 Control Behaviors s described above.

CSS Editing

Accordion Panel Magic 4 links your page to a Core CSS file: p7AP4-core.css; along with one or more theme CSS files: p7APM4-01.css-p7APM4-04.css

Should you need help with CSS, and you cannot figure it out, please contact us via one of the methods listed below.

Support Options

Before making a support inquiry, please be certain to have read the documentation that came with your product. Please include your Order Number, Dreamweaver version, as well as your computer operating system type in all support correspondence.

Support Forum

PVII maintains a Web Forum community. Go Direct to the Web Forum

E-Mail and Phone Support

E-Mail: support@projectseven.com

Phone: (336) 374-4611

Phone hours are 9:00am - 5:00pm Eastern Time U.S.