Using Accordion Panels

Step 1 - Creating the Page

In the toolbar at the top of the page, go to My Workbench > Create content > Accordion Menu Page

  1. Enter Title of accordion menu page
  2. Select department under Page Content Area (i.e., this associates form with your department site).
  3. Enter Menu Label title (i.e., typically the same as Title field unless adding to main department menu and need to shorten).
  4. Menu: leave None unless adding it to department menu.
  5. Select the Main Content tab to add content on page that will precede the accordion menus, if needed, in the Body section (i.e., text, links, images, etc.).

Step 2 - Building Accordion Panels

  1. Accordion Heading - The portion of the Panel that will always be visible to the user, this acts as the menu title for the content found within the Accordion.
  2. Accordion Body - The content that sits beneath the heading once the overall panel is opened. This content should correspond to the heading.
  3. Add Another Item / Remove buttons - These buttons allow the user to create a new panel, with a new heading and body; or remove the panel with the nested remove button.
  4. Move the panel - The Cross hair symbol used to move panels into desired order to the left of the body allows arrangement of the panels. Moving a panel is done by drag and dropping the panel to its desired horizontal position.
  5. Repeat steps two through six as necessary.
  6. Click the Save button.

Step 3 - Creating a page slideshow or static image. (optional)

  1. Click 'Page Header' at the top of the page. 
  2. Here you have options to upload one or more images and set a link for that image.
  3. Click ‘choose file’ and select an image from your computer.
  4. Click ‘upload’ and set the link, if applicable.
  5. If you upload only one image, it will be a static image on the page. If you upload more than one image, it will automatically turn into a slideshow on the page.
  6. We recommend using an image that is as close to 1170px wide and 386px tall. The image will be resized and cropped to those dimensions, so anything smaller may look pixelated. The file size itself should be 125 MB or smaller.
  7. Click the Save button. 
  8. Select Publish, from drop-down menu, then click the Apply button.

Things to Consider:

  • Accordion Panels are useful for large amounts of information that needs split up into categories.
  • Accordion Panels are able to handle tables, images, etc. However, panels are still subject to the screen size; smaller screens may not shrink the content found within; so adjust images and tables to accommodate this.