Accordions

What Are Accordions?

Accordions are a useful way of displaying various types of content, such as FAQs, with an accordion-like behavior. Items in accordion groups will initially appear 'collapsed' with only their titles showing. Clicking an item's title will 'expand' that item to show its whole content.

An example accordion feature

Use if: 

  • Users only need a few specific pieces of content within a page.
  • Information needs to be displayed in a small space.

Consider something else if:

  • Visitors need to see most or all of the information on a page. Use well-formatted text instead.
  • There is not enough content to warrant condensing. Accordions increase cognitive load and interaction cost, as users have to make decisions about what headers to click on.

How To Add Content in an Accordion Layout

  1. Identify the page that you want to add the accordion to and click "customize this page".
  2. Click the "+" add content button in a layout region.
  3. Select "Simple Accordion" from the left nav at the bottom.
  4. Enter Title/description pairs - click "add another item" to add another pair .
  5. Click "Add" to add the accordion pane to the page.
  6. Click "save" again to save the page configuration.

How To Remove Accordion Question/Answer Pairs

  1. Identify the page that you want to remove the accordion to and click "customize this page". note: (if it's the first one, you would need to make it second by dragging it down or changing the row weights and Click "save").
  2. Click the gear edit icon to edit the accordion.
  3. Delete the Title and Description from the one you want to remove
  4. Click "Save" to save the changes to the accordion
  5. Click "save" again to save the page configuration.

To Remove the Entire Accordion Panel

Caution: This will Delete ALL of your question/answer pairs. This can not be undone. Use with caution.

  1. Identify the page that you want to remove the accordion to and click "customize this page".
  2. Click the Delete "trash Can' icon in the accordion pane
  3. Remove this pane? Confirm by clicking 'OK'.
  4. Click 'Save' to save the page configuration.