• How the Accordion Widget works

The purpose of the Accordion widget is to aggregate links.  Accordions are made up of cards. The cards will form the categories that your links fall into.

For example, instead of listing all academic departments alphabetically, links to departments and programs can be grouped under categories (e.g., Humanities, Sciences, etc.). Then, the accordion can be used to display these groups at a glance, and upon clicking on a group name (e.g. Sciences), the card expands to display all links within it -- see attached screenshot.

To add an accordion:

Click on ADD CONTENT, and then select ACCORDIONS.

  • Accordion 1 Full

This window will appear:

  • Accordion 2 Full

Click ADD CARDS to make your first card, and this window will appear:

  • Accordion 3 Full
  1. Add Card: Click to add another card.

  2. Title: Enter the name of your card, or category.

  3. Description: Add an optional description of your card.

  4. Up Arrow: Move your card up in the order the cards are displayed.

  5. Down Arrow: Move your card down in the order the cards are displayed.

  6. X: Delete your card


Scroll down within the window to see these choices:

  • Accordion 4 Full
  1. Thumbnail: Add a small image for your card

  2. Preview: Click here to see how your accordion will look

  3. Add Links: Insert a link for your card. See below for a guide on completing the info in this window.

  4. Save Changes: Save your changes to the accordion

The Add Links window looks like this:

  • Accordion 5 Full
  1. Add LInk: Add another link to your card.

  2. Page(Just Choose One): Accordions have built-in page detection. If you want to link to a page on the F&M website, you type the page title and select it from the drop-down selections.

  3. Alternate Label: If you want a different label for the link than the page title, enter your desired title here. (See examples below)

  4. External URL: If you want to link to a page outside the F&M website, ignore the first two options above and enter the URL here.

  5. Up Arrow: Move your link up in the order of the links displayed.

  6. Down Arrow: Move your link up in the order of the links displayed.

  7. X: Delete your link.

Making accordions can become complex very quickly, so make sure to look at your accordion and check all card and links.


  • campus services accordion

Examples of using the Alternate Label field

See screenshot below

1. Label an external link

For example, the Alternate title field is used to label ""  as "Amtrak" 

2. Override a page title

For example,  the Alternate title field is used to display  as "Printable Campus Maps"