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.
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.
You can now set a custom CSS class for each Trigger, each content panel, or the entire (root) Accordion.
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.
Triggers can now be optioned to include borders, rounded corners, vertical spacing, and CSS animations.
Content panels can optionally be set to display borders.
The CSS that styles APM has been totally revised and uses modern techniques that are both innovative and mobile-friendly.
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.
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:
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.
Switch to the PVII category. Accordion Panel Magic 4 is the last one in the screen capture below
Switch to the PVII category. Accordion Panel Magic 4 is the last one in the screen capture below
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.
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.
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.
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.
The Accordion Panel Magic 4 interface makes customizing your widget easy!
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:
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.
Configure your widget's triggers and panels
Adds a new panel heading to the Panel Headings listing.
Deletes the selected panel heading.
Moves the selected panel heading up in the listing.
Moves the selected panel heading down in the listing.
The Heading Text options section is five lies long and contains various options and setting that can be applied to your panel headings.
Enter or edit the heading text for the selected panel heading.
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.
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:
Note: The selector name prefix .p7AP4-01 is necessary to establish the same specificity as the default panel heading trigger CSS rules.
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.
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:
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.
When adding a new panel you can choose a content format:
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.
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:
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.
This option is on by default and will cause any open panel to automatically close when a new panel is opened.
This setting will ensure that your Accordion Panel will never be completely closed.
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.
The distance from the top of your viewport to the triggered accordion trigger when Page Scroll to Trigger comes to rest.
Check this box to allow mouse-over activation of the panel headings.
Closes the open panel when your mouse leaves its associated trigger.
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.
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.
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.
You can configure how APM4 sets up when the page first loads into the browser.
The Accordion Panel will start out with all panels closed.
You can select a specific panel to open when the Accordion Panel initializes.
If you turn on Open a Specific Panel, enter the number of the panel you wish to be open on startup.
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.
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.
Select this option if you want all panels open when the page loads.
Check this box if you want to have the panel rotator start automatically when the page first loads.
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.
This controls the amount of time each panel is displayed during the rotation, in milliseconds. The default is 5000ms (5 seconds).
These settings control the operation of the included automatic Current Marking system.
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.
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.
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.
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.
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.
You can choose from 3 animation methods or animation can be turned off.
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.
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.
Assigns an attractive border around your content panels. The border colors are tied to your selected Style Theme.
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:
If your triggers are set to have rounded corners, you can add a border-radius to the custom root class:
These options allow you to set styling and effects for your triggers. Choose from:
There are three buttons along the right edge of the UI:
Click OK to finalize your UI session and write the code to your page. Click Cancel to abort the session.
When you are modifying (editing) an existing accordion, a fourth button (Remove) will appear:
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.
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 2 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 APM3 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">
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:
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.
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 APM3 widget on that page. The opener will look for the APM3 widget number, an underscore, and the APM3 content panel number. There are 2 methods available:
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 SOP Control Behaviors s described above.
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.
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.
PVII maintains a Web Forum community. Go Direct to the Web Forum
Phone: (336) 374-4611
Phone hours are 9:00am - 5:00pm Eastern Time U.S.