How to Add an Accordion Menu with the Accordion Generator

Tutorial

An accordion menu can easily be added to any pages on your MemberGate site. 

The instructions to add the accordion menu to your page can be found below. Click each point to expand the section for graphics and more specific steps.

The Accordion generator can be found under > Tools > Accordions

The Accordion generator can be found under Tools Accordions

Choose 'Create New Accordion'

Choose 'Create New Accordion' from the drop down menu and click the button.

Accordion Content

Accordion Content

Accordion

Accordion Name

Enter a name for the accordion. This name will not be shown anywhere on the live site. It is an identifier so you can find it in the drop down menu and edit it in the future.

Accordion Content

Add the text of the accordion section into an accordion content box. The information can be like any content that is added to another page on your site - it can include any cf tags, images, media etc.

Add Section Headline

Enter a headline for each section in the field above the main text box for the accordion content. This is the text the user will see to click on and expand the box.

Default Section

Click the radio button if this section will be the default open area when the accordion is loaded.

Status

Set the status of the section to 'active' if this section should be shown along with the accordion. Set the status to 'inactive' if this section should not be shown along with the accordion.

Add more Sections

Click the button to add another Header/Section area

Rearrange the Sections

If you have put your accordion together and then decided that the order of the sections is incorrect, there is an easy way using a drag and drop method to rearrange the sections

Hover over the header area of the section that should be moved until the cursor turns to a hand

Click your mouse and the whole section is now movable

Move (drag) the section to the area of the accordion where that section should be located.

Unclick the mouse to drop the section into it's new location.

Accordion Settings

Accordion Settings

The settings and styling for the accordion can be found in the accordion settings section.

Accordion

Active

Choose the status of the accordion in this drop down menu. A status of 'active' means the accordion will show on your site. A status of 'inactive' means the accordion will not be displayed on any pages.

Collapsible

One section of the accordion can appear opened by default or all of the sections can be hidden. Choose the desired option from the drop down menu. A choice of 'no' willl keep one section open. Select 'yes' if all of the sections should remain closed upon loading of the page. 

Icons

Set the icon to appear next to each header section. The icon will rotate based on if the section is open (active) or closed.

Select the icon from the drop down menu that should be displayed next to each header section.

Font and Background Colors

The fonts and background colors can be changed as needed. There can be a different font color for open (active) headers and a different color for open (active) background colors.

For the active font color, active background color, inactive font color and inactive background color click in each box and enter the hexadecimal color if known, or click in the color box to choose a color.

Press the 'Save Accordion' Button When Completed

Press the button

Copy the CF tag and paste it where you would like the accordion to appear

Add the Accordion to a Page

After the accordion has been saved, a preview screen with the accordion will appear.

The CF Tag will appear in the box below the preview. Copy the cftag and paste it into the content box for a page, department or portal page.

Popup