Accordions

Accordions are helpful when you would like to condense information on a page and let visitors select what they want to see. Accordions work well for FAQs, directions and more.

See a sample accordion at the bottom of this page.

How to Build an Accordion

Open the Accordion Editor

  1. First, create a new page, or navigate to an existing page.
  2. In the Content area, select the Accordions radio button.
  3. Click where it says Content > Accordion to expand the accordions section.

Expanded Accordion editor

Enter the Text for Each Accordion

  1. Enter the text that you always want visible in the Accordion Title field (required).
  2. If necessary, enter a subheading in the Heading field.
  3. Enter the text that you would like to be hidden in the Content field. You may add images, format text, etc. Be sure to format your text as paragraph to ensure proper spacing between the accordion head and the text.
Toggle
This is the accordion title. Click anywhere in the shaded area or + to expand
This is the Accordion heading

This is the accordion text. Be sure to format this text as Paragraph.

Add an Anchor Name to Link Directly to a Specific Accordion Field

Creating an anchor to a specific accordion field is helpful when you'd like to link to it from another point on your page or on a different page.

  1. In the CMS, select the specific accordion to which you would like to link.
  2. In the Anchor Name field, type in a name that is both descriptive and easy to remember. Anchor names should be short with no spaces and consist of lowercase letters, numbers and/or dashes.

Adding an anchor name to an accordion

You can link directly to any accordion with an anchor link once the page has been published. Refer to Insert Links and Anchors to do this.

Create Multiple Accordions

Click the green plus sign directly below the Content > Accordion section (not the Content section) to add a new accordion field. Your new accordion will appear directly below the current accordion.

Click the + sign to add another accordion field.

Remove an Accordion

If you have created more than one accordion field, under the Content > Accordion section (not the Content section), click the red minus sign ( - ) to delete the accordion field that you do not want. 

Click the - sign to remove an accordion

Reorder/Move Accordions

If you have created more than one accordion, under the Content > Accordion section (not the Content section), click on the blue up/down arrows to change the order of the accordions. Submit your page to save your work.

Use the arrow keys to reorder the accordions