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
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.
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'
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.
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
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.
Enter the Content that will Show in an Active Section into the WYSIWYG main text box
Click the '+ Add Section' Button to Add another Header/Section area
Repeat Steps 6-8 for Each New Section
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
Press the button
Copy the CF tag found on the Accordion Preview Page
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.
The Accordion Will Appear on your Page