Tutorial

How to Add an Accordion Menu with the Accordion Generator

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.

1. Under 'Tools' Select 'Accordion Generator'

Under 'Tools' Select 'Accordion Generator'

 

Accordion Generator
2. In the 'Accordion Name' field, enter a name, and Set the 'Status' field to 'Active'

In the 'Accordion Name' field, enter a name, and Set the 'Status' field to 'Active'

 

Accordion Name: The accordion name is for internal purposes only. It will not be show on your pages. 

Status: A status of 'active' means the accordion will shown on your pages. A status of 'inactive' means the accordion will not be displayed on your pages.

3. Update the Settings for the 'Collapsible' and 'Collapsed' fields

Update the Settings for the 'Collapsible' and 'Collapsed' fields

 

One section can be revealed by default or all of the fields can be hidden.

Both the Collapsible and the Collapsed fields can be set as 'yes' or 'no'. 

Collapsible: If all of the fields can be hidden, select 'Yes' from the drop down box. 

Collapsed: If all of the fields should be hidden upon loading, select 'Yes'. If the default field should be revealed (or active), select 'No'

4. Set the Icon to Appear Next to Each Header

Set the Icon to Appear Next to Each Header

 

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

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

5. Set the Colors for the Fonts and Backgrounds

Set the Colors for the Fonts and Backgrounds

 

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.

Enter a hexadecimal colors for the font and background colors in the appropriate fields. 

 

Sample Accordion and the Sections that can be Edited

6. Under the 'Accordion Content' section:

Under the 'Accordion Content' section:

 

A. Enter the title that will appear in the Header of the Section

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

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

7. Enter the Content that will Show in an Active Section into the WYSIWYG main text box

Enter the Content that will Show in an Active Section into the WYSIWYG main text box

 

8. Click the '+ Add Section' Button to Add another Header/Section area

Click the '+ Add Section' Button to Add another Header/Section area

 

9. Repeat Steps 6-8 for Each New Section

Repeat Steps 6-8 for Each New Section

 

10. Rearrange Each Section if Needed

Rearrange Each Section if Needed

 

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.

 - In the edit accordion screen, hover over the header area of the section until the cursor turns to a hand. 

 

 - Click your mouse and the whole section is now movable

 

 - Move the section to the area of the accordion where that section should be located 

 

 - Unclick Your Mouse

11. Press the 'Save Accordion' Button When Completed

Press the 'Save Accordion' Button When Completed

 

12. Copy the CF tag found on the Accordion Preview Page

Copy the CF tag found on the Accordion Preview Page

 

13. Paste the CF tag into the main text box where the accordion should appear

Paste the CF tag into the main text box where the accordion should appear

 

The CF tag can be pasted into the text box in 'add or edit content' to show it on a content page, 'add or edit department' to show it on a department page, or 'edit public or member portal' to show it on the portal pages.

14. The Accordion Will Appear on your Page

The Accordion Will Appear on your Page